Necesito crear una tabla usando solo JavaScript. La tabla se crea dinámicamente, por lo que puedo agregar filas adicionales si también lo necesito. Sin embargo, cada fila de la tabla debe tener un cuadro de texto.
Cuando trato de hacerlo de esta manera (que se muestra a continuación), la tabla se carga pero dice [objeto Elemento de entrada HTML] donde debería estar el cuadro de texto. Creo que es porque element.innerHTML está tratando de cambiarlo a una cadena.
¿Alguien puede ayudar con otra forma de agregar el cuadro de texto a la tabla?
for (var i = 0; i < tableRows.length; i++) { var table = document.getElementById("myTable"); var row = table.insertRow(table.rows.length); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); //element from array //input box var x = document.createElement("INPUT"); x.setAttribute("type", "text"); cell1.innerHTML = "object.Section"; //adds content from array outside the loop cell2.innerHTML = document.body.appendChild(x); //adding text box }En lugar de usar innerHTML, use appendChild directamente en cell2 de esta manera: cell2.appendChild(x);
Entonces, su código será:
for (var i = 0; i < tableRows.length; i++) { var table = document.getElementById("myTable"); var row = table.insertRow(table.rows.length); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); //element from array //input box var x = document.createElement("INPUT"); x.setAttribute("type", "text"); cell1.innerHTML = "object.Section"; //adds content from array outside the loop cell2.appendChild(x); //adding text box }