¿Cómo hago para que JavaScript imprima en mi página HTML una tabla a través del valor que elegirá el usuario?
Que el script JS:
let numCol = document.getElementById('txtColumns').value; let numRow = document.getElementById('txtRows').value; let go = document.getElementById('btn'); let table = document.getElementById('table'); let td = "<td></td>" * numCol; let tr = ("<tr>" + td + "</tr>") * numRow; go.addEventListener('click', function(){ table.innerHTML = tr; })Que el código HTML:
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <table class="workTable"> <tr> <td> <input type="number" placeholder="Columns Number" id="txtColumns"> </td> <td> <input type="number" placeholder="Rows Number" id="txtRows"> </td> </tr> <tr> <td colspan="2" align="center"> <button id="btn"> Print </button> </td> </tr> <div> <table id="table"> <!--Here I want to print the table--> </table> </div> </table> <script src="script.js"></script> </body> </html>Al principio pensé de esa manera con el script, pero solo aparece como un NaN y no como una tabla...
La siguiente sintaxis:
let td = "<td></td>" * numCol; no produce celdas numCol , por lo que la siguiente sintaxis:
let tr = ("<tr>" + td + "</tr>") * numRow; no produce filas numRow también.
Entonces, todo el código fuente debería ser:
let go = document.getElementById('btn'); let table = document.getElementById('table'); go.addEventListener('click', () => { let numCol = document.getElementById('txtColumns').value; //Get the value of txtColumns at the button click moment. let numRow = document.getElementById('txtRows').value; let td = "", tr = ""; for (let i = 0; i < numCol; i++) { td = td + "<td></td>"; } for (let i = 0; i < numRow; i++) { tr = tr + "<tr>" + td + "</tr>"; } table.innerHTML = tr; }) <table class="workTable"> <tr> <td> <input type="number" placeholder="Columns Number" id="txtColumns"> </td> <td> <input type="number" placeholder="Rows Number" id="txtRows"> </td> </tr> <tr> <td colspan="2" align="center"> <button id="btn"> Print </button> </td> </tr> <div> <table id="table" border="1"> <!--Here I want to print the table--> </table> </div> </table>