Печать JavaScript 2D-массив в таблицу HTML

Question

Я использую JavaScript для создания таблицы HTML, в которой выписываются элементы 2D-массива. У меня есть массив, который используется для создания заголовков (columnNames) и массива для печати содержимого каждой строки (dataArray). До сих пор у меня есть:

function addTable(columnNames, dataArray) { 

    var x = document.createElement("TABLE"); 
    x.setAttribute("id", "myTable"); 
    document.body.appendChild(x); 

    var y = document.createElement("TR"); 
    y.setAttribute("id", "myTr"); 
    document.getElementById("myTable").appendChild(y); 

//add column names 

for (i = 0; i < columnNames.length; i++) { 

    var th = document.createElement("TH"); 
    var columns = document.createTextNode(columnNames[i]); 
    th.appendChild(columns); 
    document.getElementById("myTr").appendChild(th); 
} 

И это дает мне таблицу:

Однако я теперь хочу Переберите мой 2d массив «DataArray» и распечатать все в 12 строк. У меня есть алгоритм ниже, но это работает только для одной строки. Может ли кто-нибудь помочь мне, пожалуйста?

column = 0; 

var y2 = document.createElement("TR"); 
    y2.setAttribute("id", "myTr2"); 
    document.getElementById("myTable").appendChild(y2); 

while(column < 8){ 
var th2 = document.createElement("TD"); 
    var date2 = document.createTextNode(dataArray[0][column]); 
    th2.appendChild(date2); 
    document.getElementById("myTr2").appendChild(th2); 

column++; 
} 

Я знаю, что им не хватает какой-то петли строк, но тестируется и error'd много различных алгоритмов до сих пор не повезло. Например, я хочу иметь 12 строк. Я использовал индекс 0 для первого массива только для того, чтобы я мог отображать что-то, но id идеально хотел, чтобы это значение увеличивалось до максимального числа.

Answer 1

Иды в HTML должны быть уникальными, но вы используете то же самое id для каждой строки: myTr2.

У вас уже есть ссылки на вновь созданную строку, y2:

y2 = document.createElement("TR"); 

использовать его вместо того, чтобы использовать его неуникальную id:

y2.appendChild(th2); 

У вас также есть ссылка к вновь создаваемому столу:

var x = document.createElement("TABLE"); 

Вы можете обратиться к это так же вместо того, чтобы его идентификатор, как это:

x.appendChild(y); 

В моем фрагменте кода ниже, я изменил переменную x к myTable, и я использовал вложенный цикл для перебора dataArray вместо того, чтобы использовать column переменную:

Отрывок

function addTable(columnNames, dataArray) { 
 
    var myTable = document.createElement('table'); 
 
    
 
    document.body.appendChild(myTable); 
 

 
    var y = document.createElement('tr'); 
 
    myTable.appendChild(y); 
 

 
    for(var i = 0; i < columnNames.length; i++) { 
 
    var th = document.createElement('th'), 
 
     columns = document.createTextNode(columnNames[i]); 
 
    th.appendChild(columns); 
 
    y.appendChild(th); 
 
    } 
 

 
    for(var i = 0 ; i < dataArray.length ; i++) { 
 
    var row= dataArray[i]; 
 
    var y2 = document.createElement('tr'); 
 
    for(var j = 0 ; j < row.length ; j++) { 
 
     myTable.appendChild(y2); 
 
     var th2 = document.createElement('td'); 
 
     var date2 = document.createTextNode(row[j]); 
 
     th2.appendChild(date2); 
 
     y2.appendChild(th2); 
 
    } 
 
    } 
 
} //addTable 
 

 
addTable(['Date','bbcfour','bbcnews24','bbcone','bbcthree','bbctwo','cbbc','cbeebiese'], 
 
     [['2009-01','324','1075','940','441','1040','898','1343'], 
 
      ['2009-02','524','9075','840','341','1140','398','1323'], 
 
      ['2009-03','224','3075','340','461','1050','828','1345'] 
 
     ] 
 
);

table { 
 
    border-collapse: collapse; 
 
} 
 

 
th, td { 
 
    padding: 0.3em; 
 
    border: 1px solid silver; 
 
}