Quiero mostrar varios valores de la matriz de datos en varios elementos de la tabla HTML a la vez. Y el valor de los datos va a cambiar y debe sobrescribirse en HTML. Intenté algo como a continuación usando forEach anidado pero no funciona. ¿Qué tengo que hacer?
appendchild pero crea nuevas celdas a medida que se renueva el valor de los datos y no lo quiero.
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 }) })¡Gracias por tu ayuda!
Puede usar querySelectorAll para seleccionar todos los tds y agregar su contenido
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>tambien puedes hacer eso...
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>