无法让表格迭代行

时间:2016-07-12 03:57:05

标签: javascript

我是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);
   }

}
}

1 个答案:

答案 0 :(得分:3)

.setAttribute不接受3个参数:

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

您可能正在尝试连接2个值?

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

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

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

y.appendChild(z);