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;
    });
});