为什么创建多行多列的表格最后只有一行内有表格

Question

我自己写了一个函数，用来创建多行多列的表格，但是写完发现只能创建一行多列。

    <div id="game-box"></div>

    <script>

            var Tab=createGrids(16,10);

            var gameBox=document.getElementById("game-box");

            gameBox.appendChild(Tab);

            // 创建网格

            function createGrids(row,col) {

                var Tab=document.createElement("table");

                var Tbody=document.createElement("tbody");

                var i=0,j=0;

                while(i<row) {

                    var Tr=document.createElement("tr");

                    while(j<col) {

                        var Td=document.createElement("td");

                        Tr.appendChild(Td);

                        j++;

                    }

                    Tbody.appendChild(Tr);

                    i++;

                }

                Tab.appendChild(Tbody);

                return Tab;

            }

    </script>

Answer 1

因为你第一遍运行&nbsp;while(i<row)&nbsp;的结束时候&nbsp;while(j<col)中的 j 已经是10了哦，所以，第二遍循环 i以后，创建的tr里面都是没有 td 的，因为没有走进while(j<col)&nbsp;嘛，你可以改成这样子&nbsp; &nbsp; <div id="game-box"></div>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var Tab=createGrids(16,10);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var gameBox=document.getElementById("game-box");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gameBox.appendChild(Tab);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 创建网格&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function createGrids(row,col) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var Tab=document.createElement("table");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var Tbody=document.createElement("tbody");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var i=0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; while(i<row) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var Tr=document.createElement("tr");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var j=0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; while(j<col) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var Td=document.createElement("td");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Tr.appendChild(Td);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; j++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Tbody.appendChild(Tr);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Tab.appendChild(Tbody);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return Tab;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script>