如何使用JavaScript实现HTML表格单条数据集的多行展示效果

当前代码的两个核心问题直接导致效果不符合预期：

• 写死仅插入单行，没有按每个食物对应的grade数组长度生成对应数量的表格行
• 直接把数组赋值给单元格innerHTML时，JS会触发隐式类型转换，把数组自动转成逗号拼接的字符串，这就是你看到所有grade挤在同一个单元格、显示成1,2,3,5的原因
  要实现food列跨多行展示的合并效果，直接用HTML表格原生的rowSpan纵向单元格属性就能实现，不需要额外写复杂的CSS定位逻辑。

整体逻辑采用两层循环遍历数据：外层遍历每一条食物记录，内层遍历该食物下的每个成绩，按成绩数量动态生成对应行数，给食物单元格设置匹配长度的纵向跨距，就能完全复现你想要的表格效果：

const test = [
  { food: "A", grade: ["1", "2", "3", "5"] },
  { food: "B", grade: ["1", "2"] },
  { food: "C", grade: ["1"] }
]
const tableBody = document.getElementById("table-body");
let currentRowIndex = 0;

// 外层遍历所有食物数据
test.forEach((foodItem) => {
  const gradeTotal = foodItem.grade.length;
  // 内层遍历单个食物下的所有成绩，生成对应行
  foodItem.grade.forEach((grade, gradeIndex) => {
    const newRow = tableBody.insertRow(currentRowIndex);

    // 仅在当前食物的第一行创建食物单元格，设置纵向跨距
    if (gradeIndex === 0) {
      const foodCell = newRow.insertCell(0);
      foodCell.textContent = foodItem.food;
      // 核心：让这个食物单元格纵向覆盖对应数量的成绩行
      foodCell.rowSpan = gradeTotal;
    }

    // 每一行都创建独立的成绩单元格
    const gradeCell = newRow.insertCell(gradeIndex === 0 ? 1 : 0);
    gradeCell.textContent = grade;

    currentRowIndex++;
  })
})

• rowSpan的数值要和当前食物的grade数组长度严格对应：取值偏小会导致合并覆盖不全，取值过大会侵占下一条食物的表格行
• 这类纯文本内容优先用textContent赋值，不要用innerHTML，既能避免特殊字符的转义问题，也能减少不必要的安全风险
• 不需要手动给后续行的food列塞空单元格占位，设置rowSpan后浏览器会自动预留跨出去的行位置，直接插入成绩单元格即可，不会出现列错位

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