n by n表生成器仅打印一行？

Question

我设法创建了一个js mini项目，该项目通过提供的（x，y）值构建了一个表。 我的主要问题是说我想要3个表行，无论插入的值如何，我只会得到1个。 我对appendChild方法非常陌生，有关我如何以不同方式使用它们的任何其他信息，将不胜感激。

 var submit = document.getElementById("smit"); var irow = document.getElementById("irow"); var icol = document.getElementById("icol"); // submission submit.addEventListener("click", function() { GenerateTable(); }) // functions to create values of r and c function GenerateTable() { for (var i = 0; i < irow.value; i++) { var row = document.createElement("tr"); for (var j = 0; j < icol.value; j++) { var cell = document.createElement("td"); row.appendChild(cell) } var tblBody = document.createElement("tbody"); tblBody.appendChild(row); } var body = document.getElementsByTagName("body")[0]; var tbl = document.createElement("table"); tbl.appendChild(tblBody); body.appendChild(tbl); } 

 tr { width: 50px; height: 30px; border: 1px solid black; } td { width: 50px; height: 30px; border: 1px solid black; } table { border: 2px solid black; } 

 <label>Rows</label> <input type="number" id="irow"> <label>Cols</label> <input type="number" id="icol"> <input type="submit" id="smit"> <table id="table"> </table> 

Answer 1

将创建tbody元素的代码tbody循环之外。

 var submit = document.getElementById("smit"); var irow = document.getElementById("irow"); var icol = document.getElementById("icol"); // submission submit.addEventListener("click", function() { GenerateTable(); }) // functions to create values of r and c function GenerateTable() { var tblBody = document.createElement("tbody"); // moved out of the outer loop for (var i = 0; i < irow.value; i++) { var row = document.createElement("tr"); for (var j = 0; j < icol.value; j++) { var cell = document.createElement("td"); row.appendChild(cell) } tblBody.appendChild(row); } var body = document.getElementsByTagName("body")[0]; var tbl = document.createElement("table"); tbl.appendChild(tblBody); body.appendChild(tbl); } 

 tr { width: 50px; height: 30px; border: 1px solid black; } td { width: 50px; height: 30px; border: 1px solid black; } table { border: 2px solid black; } 

 <label>Rows</label> <input type="number" id="irow"> <label>Cols</label> <input type="number" id="icol"> <input type="submit" id="smit"> <table id="table"> </table>