在某些 td 上使用 Javascript 设置 colspan（没有任何 id）

Question

我需要在现有网页上应用一些 CSS/JS。里面有

<tr foodtablesupper>
  <td class="subheader" colspan="3">
    Upper Floor
  </td>
</tr>
<tr foodchoice>
  <td class="dish-1">
    Coleslaw
  </td>
  <td class="dish-2">
    Porridge
  </td>
</tr>
<tr foodtablesupper>
  <td class="subheader" colspan="3">
    Mezzanine Floor
  </td>
</tr>

我需要将 colspan 更改为 4。如何处理 td 以及如何仅使用 vanilla-JS 更改 colspan 属性？

Answer 1

实际上，您可以根据页面上下文决定使用什么选择器来解决您的 colspanned TD。它应该足够独特。我已经选择它在你的 TR 中，具有

foodtablesupper

属性。
您的示例中没有足够的周围标记。
更新
根据作者的要求，编辑代码以解决可能的多个 TD。

document.querySelector('button').addEventListener('click', () => {

  document.querySelectorAll('tr[foodtablesupper] > td.subheader').forEach(td => td.setAttribute('colspan', 4));

});

td{
  min-width:50px;
  background:#aaa;
  text-align:center;
}
table{
  border-spacing: 3px;
}
td.subheader{
  background: yellow;
}

<table>
<tr foodtablesupper>
  <td class="subheader" colspan="3">
    Upper Floor
  </td>
</tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
<hr/>
<button>Make 4 colspan</button>