为循环加倍

Question

我正在从服务器端数组创建一个HTML表（Google Apps脚本； 所以tableArray来自那里）。我有两个有效的forEach函数。但是，我尝试使用两个for循环，因为我希望能够将不同的类添加到不同的<td>。

输出结果不符合预期（请参见下面的＃1）。我可以在一个列中获取一个数组（而不是将数组的每个元素作为单独的<td>来使用，或者将数组在每个<td>中重复（请参见下面的＃2）。

我需要在for循环中进行哪些更改才能获得预期的输出？

您可以看到HERE可用的版本。

1（与forEach一起使用）

2（不适用于for）

Index.html

function buildTable(tableArray) {
  var table = document.getElementById('table');
  var tableBody = document.createElement('tbody');
  var tbodyID = tableBody.setAttribute('id', 'tbody');

  for (var i = 0; i < tableArray.length; ++i) {
    var column = tableArray[i];
    var colA = column[0];
    var colB = column[1];
    var colC = column[2];
    var colD = column[3];

    if (colA != "") {
      var row = document.createElement('tr');
      for (var j = 0; j < column.length; ++j) {
        var cell = document.createElement('td');
        cell.appendChild(document.createTextNode(column));
        row.appendChild(cell);
      }

    }
    tableBody.appendChild(row);
  }
  table.appendChild(tableBody);
  document.body.appendChild(table);
}

Answer 1

代替行cell.appendChild(document.createTextNode(column));

写cell.appendChild(document.createTextNode(column[j]));

您忘记添加索引[j]

Answer 2

// Loop over rows
for (var i = 0; i < tableArr.length; i++) {
  var row = tableArr[i];
 // loop over columns
   for( var j =0; j<row.length; j++){
     //create each column and append to row
   }
  // append row to table body

}
// append table body to DOM

出于性能原因，您只想写入DOM一次，然后首先在内存中创建表。

Answer 3

更改

cell.appendChild(document.createTextNode(column));

到

cell.appendChild(document.createTextNode(column[i]));

这将使它正确循环遍历所有列数据，而不是重复附加整个数组的相同内容。