Question

<!DOCTYPE html>
<html>
<head>
    <title>Anti Chess</title>
</head>
<body>
    <h1 id="game_title">Anti Chess by theManikJindal</h1>
    <br />
    <br />

    <table id="game"></table>
    <script>
        var white = 1;
        var ta = document.getElementById("game");
        if(white == 1)
        {
            for(var i=0;i<8;i++)
            {
                var x = document.createElement('tr');
                ta.appendChild(x);
                for(var j=0;j<8;j++)
                {
                    var y = document.createElement('td');
                    ta.childNodes[i].appendChild(y);
                    ta.childNodes[i].childNodes[j].setAttribute("id",String.fromCharCode(j+97)+(8-i).toString());
                }

            }

        }
        else
        {
            for(var i=0;i<8;i++)
            {
                var x = document.createElement('tr');
                ta.appendChild(x);
                for(var j=0;j<8;j++)
                {
                    var y = document.createElement('td');
                    ta.childNodes[i].appendChild(y);
                    ta.childNodes[i].childNodes[j].setAttribute("id",String.fromCharCode(104-j)+(i+1).toString());
                }

            }

        }
    </script>
</body>
</html>

我无法理解为什么这个脚本不起作用。 Javascript是否有任何好的调试器，或者是否必须继续将它们的头撞在墙上以使其有意义。

请帮忙

脚本应该创建一个包含8x8框的表，属性id应该设置为“a8”，“b8”，“c8”......“h8”到“a1”，“b1”，“c1 “......”h1“。当白色的值为1时，从“h”，“g1”，“f1”......“a1”到“h8”，“g8”，...“a8”表示白色不等于1 。white = 1现在是默认值。

Answer 1

表必须始终至少有一个<tbody>元素。如果没有，浏览器将创建一个。

这意味着您的整个childNodes访问权限都是错误的。

我会建议这个HTML：

<table><tbody id="game"></tbody></table>

这应该使你的代码有效，但你可以进一步简化它：

var white = 1, a = "a".charCodeAt(0), i, j, x, ta = document.getElementById("game");
for(i=0;i<8;i++) {
    x = document.createElement('tr');
    for(j=0;j<8;j++)
        x.appendChild(document.createElement('td')).id =
               String.fromCharCode((white == 1 ? j : 8-j)+a)+(white == 1 ? 8-i : i+1);
    ta.appendChild(x);
}

正如您所看到的那样，通过将white == 1检查移至最相关的位置，我已经消除了重复整个代码块的需要。我还更多地使用了x引用，并且我已经用稍后再回过头来更容易理解的东西替换了“魔法”值（a变量）。 / p>

希望这有帮助！

编辑：另外，我只是注意到该表没有内容 - 这是什么意思它没有出现？确保你有合适的CSS来使表格单元格可见。

Answer 2

这个脚本运行正常。我在jsfiddle中启发了元素，发现元素已经创建。

我使用了一些css来表明已创建了框。

css

table{
border:1px solid black;
}
table tr, td{
border:1px solid black;
}

见http://jsfiddle.net/9uHPx/

Answer 3

Java脚本正在运行但不显示表。

在表格中添加border = 1

Answer 4

脚本运行正常。添加了几个循环，因此ID将打印到td标记中，以便您可以看到正在发生的事情。 http://jsfiddle.net/5YRKx/

        var tableTemp = document.getElementById("game");

    for (var ii = 0, row; row = tableTemp.rows[ii]; ii++) {
       //iterate through rows
       //rows would be accessed using the "row" variable assigned in the for loop
       for (var j = 0, col; col = row.cells[j]; j++) {
        row.cells[j].innerHTML  =  row.cells[j].id;
       }  
    }

不明白为什么这个javascript不起作用

4 个答案: