如何用JSON数据生成每行3列的HTML表格（替代forEach行生成方式）

当然可以实现！你之前的思路是按单个歌曲对象来遍历生成行，现在只需要把思路切换成按字段类型来生成行就行——而且forEach()完全能用，甚至会让代码更简洁～

核心思路 #

我们不再遍历每首歌，而是先确定要展示的字段列表（比如name、id、attribute），然后为每个字段生成一行：

1. 遍历每个字段，创建一个表格行(<tr>)
2. 在这一行里，遍历所有歌曲，为每首歌创建一个单元格(<td>)，填入当前字段对应的值
3. 把生成好的行添加到表格中

完整代码示例 #

首先准备好HTML容器：

<table id="songTable" border="1">
  <!-- 表格内容将通过JS动态生成 -->
</table>

然后是JavaScript代码：

// 你的示例JSON数据
const songData = {"songs":[ { "name":"Manatsu wa Dare no Mono?", "id":159, "attribute":"smile" }, { "name":"Jimo Ai♡Mantan☆Summer Life", "id":160, "attribute":"pure" }, { "name":"Natsu no Owari no Amaoto ga", "id":161, "attribute":"cool" } ] };

// 定义需要展示的字段顺序（可以根据需求调整）
const fields = ['name', 'id', 'attribute'];

// 获取表格元素
const table = document.getElementById('songTable');

// 遍历每个字段，生成对应行
fields.forEach(field => {
  // 创建新行
  const row = document.createElement('tr');
  
  // 遍历所有歌曲，为当前字段生成单元格
  songData.songs.forEach(song => {
    const cell = document.createElement('td');
    cell.textContent = song[field]; // 通过字段名动态获取对应值
    row.appendChild(cell);
  });
  
  // 将行添加到表格
  table.appendChild(row);
});

代码说明 #

• fields数组：这里定义了你要展示的字段，后续如果要新增或调整字段，只需要修改这个数组即可，不用改遍历逻辑
• song[field]：通过方括号语法动态获取对象的属性值，这是实现按字段遍历的关键
• 不管你的songs数组有多少项，代码都会自动生成对应数量的列，完全适配更多数据的情况

如果需要给每行加表头（比如第一列显示字段名），可以在创建行的时候先加一个表头单元格：

// 在创建row之后添加：
const headerCell = document.createElement('td');
headerCell.textContent = field;
headerCell.style.fontWeight = 'bold'; // 加粗表头
row.appendChild(headerCell);

这样生成的表格第一列就是字段名称，后面跟着所有歌曲的对应字段值，结构更清晰～

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