Javascript:从 2 个数组构建 html 表

Question

几个小时以来，我一直在努力寻找构建 html 的 tbody 部分的最佳方法 <table>来自两个 javascript 数组。

注意:我可能不会使用 Jquery。

我的数组包含 2 个子数组:

var arParent = [
    ["col1a", "col1b", "col1c"],
    ["col2a", "col2b", "col2c"] 
]

我需要类似的东西:

<tr>
    <td>col1a</td>
    <td>col2a</td>
</tr>
<tr>
    <td>col1b</td>
    <td>col2b</td>
</tr>
<tr>
    <td>col1c</td>
    <td>col2c</td>
</tr>

Answer 1

您可以先将行转换为列，然后添加到表

var ar = [
  ["col1a", "col1b", "col1c"],
  ["col2a", "col2b", "col2c"]
], table = document.querySelector('table tbody');

//Convert rows to columns
var r = ar[0].map(function(col, i) {
  return ar.map(function(row) {
    return row[i];
  });
});

//Add data to table
r.forEach(function(e) {
  table.innerHTML += '<tr><td>' + e[0] + '</td><td>' + e[1] + '</td></tr>'
})

<table>
  <tbody></tbody>
</table>