在这种情况下如何动态构建表答案

【问题标题】：how do i build a table dynamically in this scenario在这种情况下如何动态构建表
【发布时间】：2021-09-15 14:29:49
【问题描述】：

我有一个包含数组数组的变量。它是从 excel 文件中解析出来的代码。

我想上传我的文件并建表，我试过这样：

tabela.forEach((elem, index) => {
  console.log(elem[0], index[1])
  const row = tableBody.insertRow(index)
  const employeeCell = row.insertCell(0)
  let content = document.createTextNode(elem[0])
  employeeCell.appendChild(content)
})

像这样：

for (let i = 1; i < tabela.length; i++) {
  const row = tableBody.insertRow(tabela[1])
  const employeeCell = row.insertCell(0)
  let content = document.createTextNode(tabela[0])
  employeeCell.appendChild(content)
}

但我得到了奇怪的结果。

我真的很想了解我在做什么但遇到了问题。

变量tabela是一个13个元素的数组，每个元素是一个7个元素的数组。

有谁知道我做错了什么，所以我从“tabela”变量的解析代码构建了一个完整的表？

【问题讨论】：

index[1] 没有意义。 index 是整数，不是数组。

标签： javascript arrays foreach

【解决方案1】：

您需要循环遍历row 的元素，为每个元素添加一个单元格。

tabela.forEach(elem => {
  const row = tableBody.insertRow();
  elem.forEach(item => {
    const cell = row.insertCell();
    cell.innerText = item;
  });
})

【讨论】：

【解决方案2】：

以下演示展示了如何使用jQuery 完成任务。

const tablea = [
    [30,45,2,9,0],
    [455,65,0,5,78],
    [1,1,4,4,6]
];
let $tableBody = $('#xdata tbody');
$tableBody.html(
    tablea.map(row => $('<tr/>').html(
        row.map(cell => $('<td/>').html( cell ))
    ))
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="xdata"><tbody></tbody></table>

【讨论】：