HTML表:一个数据有多行?Javascript

Question

我希望使用HTML表为一个数据集设置多行。

var row = 0;
var test = [{
food: "A",
grade: ["1", "2", "3", "5"]
},
{
food: "B",
grade: ["1", "2"]
},
{
food: "C",
grade: ["1"]
},]
var display = document.getElementById("table-body");
var newRow = display.insertRow(row);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
cell1.innerHTML = test[0]["food"]
cell2.innerHTML = test[0]["grade"]

For example:
Food || Grade
---------------
A       || 1
|| 2
|| 3
|| 5
---------------
B.     || 1
|| 2
---------------
C.     || 1

然而，我只能将它们全部列在一个单元格中，即(1,2,3,5(。关于如何复制上表，有什么想法吗？

Answer 1

使用嵌套循环为每个任务添加行。使用第一列中的rowspan属性使其填充扩展到该设备任务的所有行。

test.forEach(t => {
t.tasks.forEach((task, i) => {
let newRow = display.insertRow();
if (i == 0) {
let firstCell = newRow.insertCell();
firstCell.innerText = t.device;
firstCell.setAttribute('rowspan', t.tasks.length;
}
newRow.insertCell().innerText = task;
});
});