Javascript 按特定属性组织/分组HTML表

我会保持简短和甜蜜。我有一张桌子，上面印着我需要的所有东西。我要做的是将程序1下的数据行分组在一起，这样就不用程序1打印，插入数据，然后再打印另一组数据，我希望它看起来像“预期结果”表。每个程序将有超过2个，只是作为一个例子。我已经在这个问题上纠结了一段时间，似乎无法理解它。我也希望能够折叠和扩展这些行，并不是所有的东西都显示出来

实际结果：

这是我的密码：

<input type="text" id="myInput" onkeyup="searchTable()" placeholder="Search by Program Name" title="Enter Program Name">

<script src="/Scripts/jquery-3.3.1.min.js"></script>
<script>

var webAppUrl = _spPageContextInfo.webAbsoluteUrl;

function loadData(source, url) {
  return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
    .then((r) => {
      if (!r.ok) throw new Error("Failed: " + url);  // Check for errors
      return r.json();  // parse JSON
    })
    .then((data) => data.d.results) // unwrap to get results array
    .then((results) => {
      results.forEach((r) => (r.source = source)); // add source to each item
      return results;
    });
}
window.addEventListener("load", function () {
  Promise.all([
    loadData("XDeliverables", webAppUrl + "/_api/web/lists/getbytitle('XDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("YDeliverables", webAppUrl + "/_api/web/lists/getbytitle('YDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("ZDeliverables", webAppUrl + "/_api/web/lists/getbytitle('ZDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
  ])
        .then(([r1, r2, r3]) => {
      const objItems = r1.concat(r2,r3);
      console.log(objItems);
      var tableContent =
        '<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><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>";

      for (var i = 0; i < objItems.length; i++) {
                tableContent += "<tr>";
                tableContent += "<td>" + objItems[i].Program + "</td>";
                tableContent += "</tr>";
                tableContent += "<tr>";
                tableContent += "<td> </td>";
                tableContent += "<td>" + objItems[i].To + "</td>";
                tableContent += "<td>" + objItems[i].Date + "</td>";
                tableContent += "<td>" + objItems[i].Approved + "</td>";
                tableContent += "<td>" + objItems[i].Notes + "</td>";
                tableContent += "<td>" + objItems[i].Deliverable + "</td>";
                tableContent += "</tr>";
      }
      $("#deliverables").append(tableContent);
    })
    .catch((err) => {
      alert("Error: " + err);
      console.error(err);
    });
});

---

如果您认为在循环数组之前需要对数组进行排序和分组。 下面是一个替换for循环的方法示例

var webAppUrl=\u spPageContextInfo.webAbsoluteUrl；
函数loadData（源、url）{
返回fetch（url，{headers:{accept:“application/json；odata=verbose”}}）//发出请求
。然后（（r）=>{
如果（！r.ok）抛出新错误（“失败：“+url”）；//检查错误
返回r.json（）；//解析json
})
.then（（data）=>data.d.results）//展开以获取结果数组
。然后（（结果）=>{
results.forEach（（r）=>（r.source=source））；//将source添加到每个项
返回结果；
});
}
addEventListener（“加载”，函数（）{
我保证([
loadData（“XDeliverables”，webAppUrl+“/\u api/web/lists/getbytitle（“XDeliverables”）/items？$select=计划、截止日期、批准日期、备注、可交付成果”），
loadData（“YDeliverables”，webAppUrl+“/\u api/web/list/getbytitle（'YDeliverables'）/items？$select=计划、截止日期、批准日期、备注、可交付成果”），
loadData（“ZDeliverables”，webAppUrl+“/\u api/web/lists/getbytitle（“ZDeliverables”）/items？$select=计划、截止日期、批准日期、备注、可交付成果”），
])
.然后（[r1，r2，r3]）=>{
const objItems=r1.concat（r2，r3）；
日志（objItems）；
var表格内容=
“程序”+
“至”+
“提交日期”+
“已批准”+
“注释”+
“可交付成果”+
"";
var-dobj={}
objItems.forEach（项=>{
var program=项目程序；
删除（item.Program）；//删除此行以将程序保留在项数据中
如果（！sortedObj[程序]）{
sortedObj[程序]=[]；
}
sortedObj[程序].推送（项目）；
});
//按可交付成果排序
Object.key（sortedObj.forEach）（key=>{
[钥匙]
.排序（（a，b）=>{
如果（a.可交付成果===b.可交付成果）{
返回0；
}
返回a.可交付成果>b.可交付成果？1:-1；
})
});
Object.key（sortedObj.forEach）（key，index）=>{
tableContent+=“”；
tableContent+=“”+键+“”；
tableContent+=“”；
sortedObj[key].forEach（obj=>{
tableContent+=“”；
tableContent+=“”；
tableContent+=“”+obj.To+“”；
tableContent+=“”+对象日期+“”；
tableContent+=“”+obj.Approved+“”；
tableContent+=“”+对象注释+“”；
tableContent+=“”+obj.可交付成果+“”；
tableContent+=“”；
});
});
$（“#可交付成果”）。追加（表格内容）；
})
.catch（（错误）=>{
警报（“错误：+err”）；
控制台错误（err）；
});
});**强文本**

我可以用控件中断功能来实现这一点吗？我尝试过实现它，但它只生成我的搜索栏，而不是发布到表中。是否要使其在表视图中可折叠/可扩展？我认为最简单的方法是类。我更新了第一个forEach循环以获得索引。我会根据索引为所有子行提供一个类，然后监听父行上的单击，以根据子行的类和当前可见性适当地隐藏/显示子行。我添加了逻辑来对交付项进行初始排序。如果您想要动态排序，您可能应该查看表库。我还向trs添加了类和ID。听一下tr.parent->通过解析其id（parent-->hide/showtrs with class child-Let-us获得其索引。

<input type="text" id="myInput" onkeyup="searchTable()" placeholder="Search by Program Name" title="Enter Program Name">

<script src="/Scripts/jquery-3.3.1.min.js"></script>
<script>

var webAppUrl = _spPageContextInfo.webAbsoluteUrl;

function loadData(source, url) {
  return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
    .then((r) => {
      if (!r.ok) throw new Error("Failed: " + url);  // Check for errors
      return r.json();  // parse JSON
    })
    .then((data) => data.d.results) // unwrap to get results array
    .then((results) => {
      results.forEach((r) => (r.source = source)); // add source to each item
      return results;
    });
}
window.addEventListener("load", function () {
  Promise.all([
    loadData("XDeliverables", webAppUrl + "/_api/web/lists/getbytitle('XDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("YDeliverables", webAppUrl + "/_api/web/lists/getbytitle('YDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("ZDeliverables", webAppUrl + "/_api/web/lists/getbytitle('ZDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
  ])
        .then(([r1, r2, r3]) => {
      const objItems = r1.concat(r2,r3);
      console.log(objItems);
      var tableContent =
        '<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><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>";

      for (var i = 0; i < objItems.length; i++) {
                tableContent += "<tr>";
                tableContent += "<td>" + objItems[i].Program + "</td>";
                tableContent += "</tr>";
                tableContent += "<tr>";
                tableContent += "<td> </td>";
                tableContent += "<td>" + objItems[i].To + "</td>";
                tableContent += "<td>" + objItems[i].Date + "</td>";
                tableContent += "<td>" + objItems[i].Approved + "</td>";
                tableContent += "<td>" + objItems[i].Notes + "</td>";
                tableContent += "<td>" + objItems[i].Deliverable + "</td>";
                tableContent += "</tr>";
      }
      $("#deliverables").append(tableContent);
    })
    .catch((err) => {
      alert("Error: " + err);
      console.error(err);
    });
});

{"Notes": "Example Notes", "Approved": "Yes", "Program": "Prorgam 1", "Date": "12/23/2018", "To": "example@example.com", "source": "XDeliverables", "Deliverable": "Monthly Status Report (MSR)"},
{"Notes": "Example Notes", "Approved": "Yes", "Program": "Program 1", "Date": "03/30/2020", "To": "example@example.com", "source": "XDeliverables", "Deliverable": "Meeting Minutes"},
{"Notes": "Example Notes", "Approved": "Yes", "Program": "Program 2", "Date": "12/23/2018", "To": "example@example.com", "source": "YDeliverables", "Deliverable": "Monthly Status Report (MSR)"},
{"Notes": "Example Notes", "Approved": "Yes", "Program": "Program 2", "Date": "12/3/2017", "To": "example@example.com", "source": "YDeliverables", "Deliverable": "Meeting Minutes"},
{"Notes": "Example Notes", "Approved": "No", "Program": "Program 3", "Date": "4/17/2020", "To": "example@example.com", "source": "ZDeliverables", "Deliverable": "Monthly Status Report (MSR)"},
{"Notes": "Example Notes", "Approved": "Yes", "Program": "Program 3", "Date": "12/23/2018", "To": "example@example.com", "source": "ZDeliverables", "Deliverable": "Meeting Minutes"},