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