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

Question

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>

js

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!

Did you mean appendChild instead of appendchild?

double-beep
– double-beep

2021-12-29 19:17:53 +00:00
Commented Dec 29, 2021 at 19:17 — double-beep
– double-beep, Commented Dec 29, 2021 at 19:17

Vineesh · Accepted Answer · 2021-12-29 16:51:10Z

1

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>

answered Dec 29, 2021 at 16:51

Vineesh

3,78223 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mister Jojo · Accepted Answer · 2021-12-29 17:10:01Z

0

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>

answered Dec 29, 2021 at 17:10

Mister Jojo

23k6 gold badges28 silver badges45 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related