Quiero crear una tabla dinámica usando html y javascript donde el usuario ingresa el número de filas y quiero que todas las celdas de la tabla sean del tipo de entrada
function createTable() { var a, b, tableElem, rowElem, colElem; a = 7 b = 5 if (a == "" || b == "") { alert("Please enter some numeric value"); } else { tableElem = document.createElement('table'); for (var i = 0; i < a; i++) { rowElem = document.createElement('tr'); for (var j = 0; j < b; j++) { colElem = document.createElement('td'); colElem.appendChild(document.createTextNode(j + 1)); //to print cell number rowElem.appendChild(colElem); } tableElem.appendChild(rowElem); } document.body.appendChild(tableElem); }Encontré este código, pero ¿cómo hacer que todas las celdas sean de tipo de entrada?
En lugar de agregar elementos de input dentro de cada celda de la tabla, una opción sería establecer el atributo contenteditable para cada celda.
Un detector de eventos simple para detectar focusout puede desencadenar cualquier paso que desee realizar, como extraer el texto ingresado y configurarlo en variables para cálculos adicionales.
Este fragmento de trabajo utiliza una tabla escrita en html, pero el mismo principio se puede aplicar a la tabla agregada dinámicamente.
const cells = document.getElementsByTagName('td'); for (let i=0; i<cells.length; i++) { cells[i].setAttribute("contenteditable", ""); cells[i].addEventListener('focusout', (event) => { console.log(event.target.innerText); }); } // next cell; td { width: 50px; height: 1.2em; border: 1px solid red; } table { border-collapse: collapse; } <p>enter text in cells below:</p> <table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table>