可折叠/可扩展HTML表格行

Question

我有一个排序的HTML表格，我需要协助来解决最后的小问题。我的表当前按程序排序。我想使其内部的数据可折叠/展开，以便显示/隐藏。然后，在此我要按可交付项目分组。用我编程的相同方式。并且使该行也能够折叠/展开，因为将有两种以上的交付方式同时满足会议记录和MSR

这是到目前为止我的桌子的图片及其输出：

这是我的代码：

.then(([r1, r2, r3]) => {
      const objItems = r1.concat(r2,r3);
      console.log(JSON.stringify(objItems));
      console.log(objItems);
      var tableContent =
        '<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr colspan = "5"><td><strong>Program</strong></td>' +
        "<td><strong>To</strong></td>" +
        "<td><strong>Date Submitted</strong></td>" +
        "<td><strong>Approved</strong></td>" +
        "<td><strong>Notes</strong></td>" +
        "<td><strong>Deliverable</strong></td>" +
        "</tr></thead><tbody>";
        
        var sortedObj = {}
objItems.forEach(item => {
  var program = item.Program;
  delete(item.Program); //remove this line to keep the program in the item data
  if (!sortedObj[program]) {
    sortedObj[program] = [];
  }
  sortedObj[program].push(item);
});

//sort by deliverable
Object.keys(sortedObj).forEach(key => {
  sortedObj[key]
    .sort((a, b) => {
      if (a.Deliverable === b.Deliverable) {
        return 0;
      }
      return a.Deliverable > b.Deliverable ? 1 : -1;
    })
});

Object.keys(sortedObj).forEach((key, index) => {
  tableContent += "<tr id='parent-" + index + "' class='parent'>";
  tableContent += "<td>" + key + "</td>";
  tableContent += "</tr>";
  sortedObj[key].forEach(obj => {
    tableContent += "<tr class='child child-" + index + "'>";
    tableContent += "<td> </td>";
    tableContent += "<td>" + obj.To + "</td>";
    tableContent += "<td>" + obj.Date + "</td>";
    tableContent += "<td>" + obj.Approved + "</td>";
    tableContent += "<td>" + obj.Notes + "</td>";
    tableContent += "<td>" + obj.Deliverable + "</td>";
    tableContent += "</tr>";
  });
});
      $("#deliverables").append(tableContent);
    })
    .catch((err) => {
      alert("Error: " + err);
      console.error(err);
    });
});