Estoy tratando de crear una página web donde el usuario pueda crear su propio horario. El usuario puede ingresar los valores de líneas y columnas en alguna entrada para construir una tabla en la que el usuario escribirá su horario. Yo uso este código javascript:
var p = document.getElementById('paragraph'); var table = document.createElement('table'); var tbody = document.createElement('tbody'); table.appendChild(tbody); for (let i = 0; i < lines; i++){ let tr = document.createElement('tr'); for (let j = 0; j < columns; j++){ let td = document.createElement('td'); } tbody.appendChild(tr); } p.appendChild(table); Sin embargo, cuando intento agregar información a las celdas de la tabla, no puedo escribir valores en cada una de ellas. He usado .innerHTML pero no funciona como debería. La información se escribirá sólo al principio de la tabla.
¿Debo dar una identificación a cada td y luego dirigirme a ellos por identificación cuando necesito escribir la información? ¿O hay otra forma de escribir valores en las celdas de la tabla?
Creo que necesitas algo como esto para insertar los datos.
Tenemos insertRow(), que es una función predefinida que utilicé en esta respuesta para insertar una nueva fila y luego inserté columnas con la función insertCell.
<!DOCTYPE html> <html> <body> <div class="inputs"> <input type="text" id="input1" placeholder="Enter first col data" > <input type="text" id="input2" placeholder="Enter second col data" > </div> <br> <br> <br> <table id="myTable"> <thead style="background-color: beige;"> <tr> <td>default head row cell 1</td> <td>default head row cell 2</td> </tr> </thead> <tbody></tbody> </table> <br> <button type="button" onclick="myFunction()">add data to body row</button> <script> function myFunction() { var table = document.querySelector("#myTable tbody"); var row = table.insertRow(); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); const val1 = document.getElementById('input1').value; const val2 = document.getElementById('input2').value; cell1.innerHTML = val1; cell2.innerHTML = val2; } </script> </body> </html>Creo que debe consultar su botón en el archivo js y escribir una función que se ejecutará en el evento "onclick". En esta función, está accediendo a la variable de la tabla. Mediante el uso de la función javaScript incorporada «insertRow()» está agregando filas a su tabla. Luego, debe agregar celdas a esta fila en la que se almacenará la información que ingresaron los usuarios. Esto también lo puede hacer utilizando la función integrada «insertCell()» A continuación, accede a los campos en los que el usuario ha introducido datos Recuperar valores utilizando la función integrada «value» Utilizando la función integrada «innerHTML» , dibuje celdas con la información que recibió en el paso anterior Puede mirar el código escrito a continuación para una mejor asimilación de la información
<!DOCTYPE html> <html> <body> <div class="inputs" > <input type="text" id="firstColumn" placeholder="Enter data here" > <input type="text" id="SecondColumn" placeholder="Enter data here" > </div> <table id="Table"> <thead> <tr> <td style="background-color: pink;">Name of first column</td> <hr> <td style="background-color: purple;">Name of second column</td> </tr> </thead> <tbody></tbody> </table> <br> <button style="background-color: yellow;" type="button" id = "btn">Add</button> <script> const button = document.querySelector('#btn'); btn.onclick = function() { var table = document.querySelector("#Table tbody"); var row = table.insertRow(); var Fcell = row.insertCell(0); var Scell = row.insertCell(1); const Fdata = document.getElementById('firstColumn').value; const Sdata = document.getElementById('SecondColumn').value; Fcell.innerHTML = Fdata; Scell.innerHTML = Sdata; } </script> </body> </html>