JavaScript 用for循环绘制表格失败

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

使用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的表格。

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

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

img


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

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

1、table的td里面没有内容，边框没有样式
2、tr没有添加到table里

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>document对象</title>
    <style>
       tr td{
            width: 10px;
            height: 8px;
            border: 1px solid;
       }
    </style>
</head>

<body>
        <div id="board">
        </div>
</body>
<script type="text/javascript">
    var i, z = "0"; var r = 8; var c = 8;
    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);
                ttd.innerHTML = ttd.id;
                ttr.appendChild(ttd)
            }
            table.appendChild(ttr)
        }
        console.log(table)
        var board = document.getElementById("board");
        board.appendChild(table);
    };
    function getCellID(colsPerRow, r, c) {
        var id = colsPerRow * (r - 1) + c;
        return "c" + id;
    }
    drawGameBoard(r,c);

</script>

</html>