0
162
VistasCreando una tabla con js
OK, soy muy nuevo en estas cosas. Pensé que tenía el sentido DOM correcto, pero mi código no funciona. La tarea es crear una tabla como esta.
Esta es la pieza que hice. ¿Podría ayudarme señalando el error que cometí o las partes que faltan en mi código? Cada ayuda muy apreciada.
const tableValues = new Array(10).fill(false).map((x, i) => { return new Array(10).fill(1).map((y, i2) => { return (i + 1) * i2 }) }) document.addEventListener('DOMContentLoaded', tableCreate, false); function tableCreate() { const table = document.getElementById("table"); tableValues.forEach((row) => { const row = document.createElement("tr") row.forEach(cell => { const cell = document.createElement("td"); cell.innerHTML = cellText; cell.appendChild(cellText) } row.appendChild(cell)) }) table.appendChild(body) } <table> <tbody id="table"></tbody> </table>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
He arreglado su script sin cambiar mucho el código. Estúdielo y descubra cuáles fueron los problemas.
Básicamente, tenía el appendChild fuera de ambos bucles. También usó appendChild dos veces en la celda; PODRÍA haber usado un createTextNode en el valor para usar appendChild en el contenido de la celda
const tableValues = new Array(10).fill(false).map((x, i) => { return new Array(10).fill(1).map((y, i2) => { return (i + 1) * i2 }) }) document.addEventListener('DOMContentLoaded', tableCreate, false); function tableCreate() { const table = document.getElementById("table"); tableValues.forEach(values => { const row = document.createElement("tr") values.forEach(value => { const cell = document.createElement("td"); cell.innerHTML = value; //cell.appendChild(cellText) row.appendChild(cell) }) table.appendChild(row) }) } <table> <tbody id="table"></tbody> </table>Aquí hay una versión más corta.
const tableValues = new Array(10).fill(false).map((x, i) => new Array(10).fill(1).map((y, i2) => (i + 1) * i2)) const tableCreate = () => document.getElementById("table") .innerHTML = tableValues .map(values => `<tr> ${values .map(value => `<td>${value}</td>`).join('')} </tr>`).join(''); document.addEventListener('DOMContentLoaded', tableCreate); <table> <tbody id="table"></tbody> </table>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta