javascript - Warum gibt es beim Erstellen einer Tabelle mit mehreren Zeilen und Spalten am Ende nur eine Tabelle in einer Zeile?

Question

Ich habe selbst eine Funktion geschrieben, um eine Tabelle mit mehreren Zeilen und Spalten zu erstellen, aber nachdem ich sie geschrieben hatte, stellte ich fest, dass ich nur eine Zeile und mehrere Spalten erstellen konnte.

    <p id="game-box"></p>
    <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) 嘛，

你可以改成这样子

    <p id="game-box"></p>
    <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>

应该就可以了