HTML 表：一个数据多行？ Javascript

Question

I want to have multiple rows for one data set using HTML table.

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

However, I'm only able to have them all listed in one cell ie (1,2,3,5). Any ideas on how to replicate the table above?

Answer 1

Use nested loops to add rows for each task. Use the rowspan attribute in the first column to make it fill expand to all the rows for that device's tasks.

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