show multiple values from the data array in multiple HTML table elements with JavaScript-CodePudding

I want to show multiple values from the data array in multiple HTML table elements at once. And the data value going to change and it needs to be overwritten in HTML. I tried something like below by using nested forEach but it doesn't work. What should I do?

I've tried appendchild but it creates new cells as the data value renewed and I don't want it.

HTML

<table>
  <thead>something</thead>
  <tbody>
    <tr id="changeThis">
      <th>row head</th>
      <td>0</td><!-- 1 -->
      <td>0</td><!-- 2 -->
      <td>0</td><!-- 3 -->
      <td>0</td><!-- 4 -->
    </tr>
  </tbody>
</table>

const data = [1, 2, 3, 4]
const changeThis = document.querySelector("#changeThis");

changeThis.forEach(cellItem => {
   data.forEach(dataItem => {
      cellItem.innerHTML = dataItem
   })
})

Thank you for your help!

CodePudding user response：

You can use querySelectorAll to select all tds and add your content

const data = [1, 2, 3, 4]
const changeThis = document.querySelectorAll("#changeThis td");


changeThis.forEach((cellItem,idx) => {
      cellItem.innerHTML = data[idx];
})

<table>
  <thead>something</thead>
  <tbody>
    <tr id="changeThis">
      <th>row head</th>
      <td>0</td><!-- 1 -->
      <td>0</td><!-- 2 -->
      <td>0</td><!-- 3 -->
      <td>0</td><!-- 4 -->
    </tr>
  </tbody>
</table>

CodePudding user response：

you can also do that...

const 
  data       = [1, 2, 3, 4]
, changeThis = document.querySelector('#changeThis')
  ;
let index = 0;

for (let cell of [...changeThis.cells])
  {
  if ( cell.matches('td'))
     cell.textContent = data[index  ]
  }

<table>
  <thead>something</thead>
  <tbody>
    <tr id="changeThis">
      <th>row head</th>
      <td>0</td><!-- 1 -->
      <td>0</td><!-- 2 -->
      <td>0</td><!-- 3 -->
      <td>0</td><!-- 4 -->
    </tr>
  </tbody>
</table>