如何基于Excel解析得到的二维数组用JavaScript动态构建HTML表格

• 第一个forEach版本的错误：
  1. console.log(elem[0], index[1]) 中index是数字类型的行下标，不存在[1]属性，此处会输出undefined
  2. 仅插入了第0列的单元格，每个行对应子数组有7个元素，剩余6列完全没有处理，只会展示第一列内容
  3. 未区分表头和表体结构，如果Excel第一行是表头字段，会直接和数据行混排
• 第二个for循环版本的错误：
  1. insertRow()方法要求传入数字类型的行下标，传入tabela[1]（数组类型）属于参数类型错误，无法正确插入行
  2. createTextNode(tabela[0]) 传入的是整个第一行的子数组，所有行的内容都会被设置为该数组转字符串的结果，无法展示对应行的正确数据
  3. 同样仅处理了第0列，剩余6列未生成
  4. 循环从i=1开始跳过首行后，插入行的下标没有对应偏移，会出现行顺序错误

假设你解析得到的tabela第一行为表头字段，剩余12行为数据，完整实现如下：

// 先清空原有表体内容，避免重复渲染
tableBody.innerHTML = ''
// 可选：如果需要单独生成表头<thead>，可以单独处理第一行
const tableHeader = document.querySelector('table thead')
if (tableHeader) {
  const headerRow = tableHeader.insertRow(0)
  // 遍历第一行的7个表头字段生成表头单元格
  tabela[0].forEach(headerText => {
    const th = document.createElement('th')
    th.textContent = headerText
    headerRow.appendChild(th)
  })
}

// 生成表体内容，跳过首行表头（如果不需要表头就把i初始值改成0）
for (let i = 1; i < tabela.length; i++) {
  // 行下标对应i-1，因为跳过了首行表头
  const row = tableBody.insertRow(i - 1)
  // 遍历当前行的7个元素，生成所有列的单元格
  tabela[i].forEach((cellText, colIndex) => {
    const cell = row.insertCell(colIndex)
    cell.textContent = cellText
  })
}

如果你不需要单独区分表头，所有内容都放在表体中，直接简化为如下代码即可：

tableBody.innerHTML = ''
tabela.forEach((rowData, rowIndex) => {
  const row = tableBody.insertRow(rowIndex)
  rowData.forEach(cellText => {
    row.insertCell().textContent = cellText
  })
})

内容的提问来源于stack exchange，提问作者TFast