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>