Setting colspan with Javascript on certain td (without any id)

May 20, 2023

I need to apply some CSS/JS on an existing web page. Within it there is

<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>

I need to change the colspan to 4. How can I address the td and how do I change the colspan attribute just using vanilla-JS?

>Solution :

It’s your decision actually what selector to use to address your colspanned TD based on the its page context. It should unique enough. I’ve chosen it to be in your TR with foodtablesupper attribute.
There’s not enough surrounding markup in your example.
UPDATE
Edited the code to address possible several TDs as the author asked.

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>