如何用JavaScript将多数组迭代为规范HTML表格行？

现有代码可以从嵌套数组中提取分类名称生成表头，但子数组的所有数据都被放入表格第一列，每个数据项单独占一行。需要修改代码，让数据填入对应列的单元格，子数组长度不足时对应单元格留空，生成如下结构的表格：

<div class="s-table-container">
<table class="s-table">
<thead>
<tr>
<th>Cats</th>
<th>Dogs</th>
<th>Reptiles</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lion</td>
<td>Wolf</td>
<td>Snake</td>
</tr>
<tr>
<td>Tiger</td>
<td>Pug</td>
<td>Gecko</td>
</tr>
<tr>
<td>Leopard</td>
<td></td>
<td>Lizard</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Triceratops</td>
</tr>
</tbody>
</table>
</div>

现有代码 #

JavaScript #

var MyArray = [['Cats', ['Lion','Tiger','Leopard']], ['Dogs', ['Wolf','Pug']], ['Reptiles', ['Snake','Gecko','Lizard','Triceratops']]];

var MyTable = document.getElementById("results");
const headerRow = document.createElement("tr");
MyTable.appendChild(headerRow);
for(var i=0;i<MyArray.length;i++) {
    const newCell = document.createElement("th");
    newCell.textContent = MyArray[i][0];
    headerRow.appendChild(newCell);
    for (const datum of MyArray[i][1]) {
        const newRow = document.createElement("tr");
        MyTable.appendChild(newRow);
        const newCell = document.createElement("td");
        newCell.textContent = datum;
        newRow.appendChild(newCell);
    }
}

HTML #

<table id='results' border=1></table>

解决方案 #

修改思路 #

1. 先确定所有子数组中最长的长度，以此作为表格的总行数；
2. 单独创建<thead>和<tbody>结构，让表格语义更清晰；
3. 循环每一行索引，为每个索引创建一行；
4. 在每一行中，遍历每个分类列，取出对应索引的元素，若该索引超出子数组长度，则单元格留空。

修改后的完整代码 #

JavaScript

var MyArray = [['Cats', ['Lion','Tiger','Leopard']], ['Dogs', ['Wolf','Pug']], ['Reptiles', ['Snake','Gecko','Lizard','Triceratops']]];

var MyTable = document.getElementById("results");

// 创建表头部分
const thead = document.createElement("thead");
const headerRow = document.createElement("tr");
thead.appendChild(headerRow);
MyTable.appendChild(thead);

// 生成表头单元格
MyArray.forEach(category => {
    const th = document.createElement("th");
    th.textContent = category[0];
    headerRow.appendChild(th);
});

// 计算需要的总行数（最长子数组的长度）
const maxRows = Math.max(...MyArray.map(category => category[1].length));

// 创建表体部分
const tbody = document.createElement("tbody");
MyTable.appendChild(tbody);

// 循环生成每一行
for (let rowIndex = 0; rowIndex < maxRows; rowIndex++) {
    const row = document.createElement("tr");
    tbody.appendChild(row);
    
    // 为每个列填充对应数据
    MyArray.forEach(category => {
        const td = document.createElement("td");
        // 取出当前行索引对应的元素，不存在则为空字符串
        td.textContent = category[1][rowIndex] || "";
        row.appendChild(td);
    });
}

HTML

<table id='results' border=1></table>

关键说明 #

• 使用Math.max(...MyArray.map(...))快速获取最长子数组的长度，确定表格行数；
• 分离<thead>和<tbody>，符合HTML表格的语义化规范；
• 在每行循环中，遍历所有分类列，通过rowIndex匹配对应位置的元素，用|| ""处理子数组长度不足的情况，确保单元格留空而不是显示undefined。

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