Не удается заставить таблицу перебирать строки

Я новичок в 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);
   }

}
}


javascript
person Patrick Weiss    schedule 12.07.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

.setAttribute не принимает 3 параметра:

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

Вы, вероятно, пытаетесь объединить 2 значения?

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

Также у вас нет горизонтальных рядов. Вы добавляете все ячейки в первую строку с атрибутом myTr! Вы создаете строки с одним и тем же атрибутом id, а .getElementById возвращает первый соответствующий элемент.

И вам не нужно добавлять атрибут к элементу и запрашивать DOM для получения того же элемента по идентификатору. Подумать дважды. y относится к текущей строке. Вы можете просто закодировать:

y.appendChild(z);
person undefined    schedule 12.07.2016
comment
Некоторые проблемы обучения связаны с незнанием того, как описать то, что вы пытаетесь сделать. Я не знаю, почему я зациклился на заданном атрибуте. Ваш совет по запросу DOM действительно помог! Я заработал после удаления вызовов .getElementById(). - person Patrick Weiss; 12.07.2016