javascript - 无法让表迭代行

Question

我对 javascript 很陌生，所以这可能真的很愚蠢...但我不知道为什么我无法让脚本垂直放置新的表格行...这段代码似乎附加了所有新行与第一行水平。

function genGameGrid(){
var rows=10, columns=10;
var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");
document.body.appendChild(x);

    for(var i=0;i<=rows;i++){
       var y = document.createElement("TR");
       y.setAttribute("id", "myTr", i);
       document.getElementById("myTable").appendChild(y);
       for(var j=0;j<=columns;j++){
           var z = document.createElement("TD");
           var t = document.createTextNode(j);
           z.appendChild(t);
           document.getElementById("myTr").appendChild(z);
       }
   }  
}

我认为这与设置 var y 的属性有关，但不知道......任何帮助将不胜感激!

经过帮助，我知道了我哪里搞砸了。这是功能代码:

function genGameGrid(){
var rows=10, columns=10;
var table = document.createElement("TABLE");
document.body.appendChild(table);

 for(var i=0;i<=rows;i++){
   var row = document.createElement("TR");
   table.appendChild(row);

   for(var j=0;j<=columns;j++){
       var cell = document.createElement("TD");
       var text = document.createTextNode("");
       cell.appendChild(text);
       row.appendChild(cell);
   }

}
}

Answer 1

.setAttribute 不接受 3 个参数:

y.setAttribute("id", "myTr", i);

您可能正在尝试连接这两个值？

y.setAttribute("id", "myTr" + i);

而且你没有水平行。您要将所有单元格附加到具有 myTr 属性的第一行!您正在生成具有相同 id 属性的行，并且 .getElementById 返回第一个匹配元素。

而且您不需要向元素添加属性并通过 ID 查询 DOM 来获取相同的元素。三思而后行。 y 指当前行。您可以简单地编写代码:

y.appendChild(z);