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

Question

我使用JavaScript来生成打印出2D数组元素的HTML表格。我有一个数组用于创建标题（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变量：< / p>

<强>段

＆＃13;

＆＃13;

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']
         ]
);

＆＃13;

table {
  border-collapse: collapse;
}

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

＆＃13;

＆＃13;

＆＃13;