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

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

因为你第一遍运行 while(i<row) 的结束时候 while(j<col)中的 j 已经是10了哦，所以，第二遍循环 i以后，创建的tr里面都是没有 td 的，因为没有走进while(j<col) 嘛，

你可以改成这样子

    <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;

                while(i<row) {

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

                    var j=0;

                    while(j<col) {

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

                        Tr.appendChild(Td);

                        j++;

                    }

                    Tbody.appendChild(Tr);

                    i++;

                }

                Tab.appendChild(Tbody);

                return Tab;

            }

    </script>