JavaScript将2D数组打印到HTML表中

Question

我正在使用JavaScript生成一个HTML表，该表打印出2D数组的元素。 我有一个用于创建Headers（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++;
}

我知道我缺少某种行循环，但是到目前为止，已经尝试并出错了许多不同的算法，但都没有运气。 我想例如有12行。 我为第一个数组索引使用了0，只是为了显示某些内容，但id理想地希望该值增加到最大数。

Answer 1

HTML中的ID应该是唯一的，但是每行都使用相同的id ： myTr2 。

您已经有了对新创建的行y2的引用：

y2 = document.createElement("TR");

使用它而不是尝试使用其非唯一id ：

y2.appendChild(th2);

您还可以参考新创建的表：

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

您可以类似地引用它，而不是这样引用它的id：

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; }