JavaScript 用for循环绘制表格失败

Question

问题遇到的现象和发生背景

使用for循环，creatElement（“tr”）和（“td”），最后使用appendChild写入上一层。但无法发挥作用

问题相关代码，请勿粘贴截图

var i,z="0";    var r="";var c="0";
function  drawGameBoard( r , c ) {
var table =document.createElement("table");
 
 for(i=1; i <= r; i++) { 
     var ttr =document.createElement("tr"); 
     for(z=1;  z<=c; z++){ 

         var ttd = document.createElement("td");
         ttd.className="white";ttd.id=getCellID(8,i,z);
         ttr.appendChild(ttd)};
 }; 
var board= document.getElementById("board");document.getElementById("board").appendChild(table);
 };
function getCellID (colsPerRow,r,c){var id=colsPerRow*r + c;return "c"+ id;};

运行结果及报错

,但无法如预期生成8*8的表格。

Answer 1

题主html代码发出来看下，然后调用drawGameBoard函数的代码需要放到board这个dom对象下或者放到window.onload事件中，要不会找不到board对象出错

题主忘记将ttr添加到table中了，table没有数据无法显示，当然上面的问题也要注意。改下面的就可以了

<div id="board"></div>
<script>
    var i, z = "0"; var r = ""; var c = "0";
    function drawGameBoard(r, c) {
        var table = document.createElement("table"); table.border='1'
        for (i = 1; i <= r; i++) {
            var ttr = document.createElement("tr");
            for (z = 1; z <= c; z++) {
                var ttd = document.createElement("td");
                ttd.className = "white"; ttd.id = getCellID(8, i, z);
                ttr.appendChild(ttd)
            };
            table.appendChild(ttr)
        };
        var board = document.getElementById("board"); document.getElementById("board").appendChild(table);
    };
    function getCellID(colsPerRow, r, c) { var id = colsPerRow * r + c; return "c" + id; };
    drawGameBoard(8,8)
</script>

有帮助麻烦点下【采纳该答案】，谢谢~~有其他问题可以继续交流~