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

Question

我会保持简短和甜蜜。我有一张桌子，可以打印我需要的一切。我想要做的是将程序 1 下的数据行组合在一起，而不是程序 1 打印、插入数据，然后再次打印，然后再打印另一组数据，我希望它看起来像“预期结果”表。每个程序将有超过 2 个，仅以此为例。我已经坚持了一段时间，似乎无法弄清楚。我还希望能够以并非所有内容都显示的方式折叠和展开这些行

实际结果：

**Expected Result** 

    +------------+----------------------+-----------+------------+--------------+--------------+

    | Program    | To                   |  Date     |   Approved | Notes        | Deliverable  |

    +------------+----------------------+-----------+------------+--------------+--------------+

    | Program 1  | [e-mail]  | 12/23/2018| Yes        | Example Notes| MSR          |

    |            | [e-mail]  | 03/30/2020| Yes        | Example Notes| Meeting Mins |

    +------------+----------------------+-----------+------------+--------------+--------------+

    | Program 2  | [e-mail]  | 12/23/2018| Yes        | Example Notes| MSR          |

    |            | [e-mail]  | 12/03/2017| Yes        | Example Notes| Meeting Mins |

    +------------+----------------------+-----------+------------+--------------+--------------+

    | Program 3  | [e-mail]  | 04/17/2020| Yes        | Example Notes| MSR          |

    |            | [e-mail]  | 03/30/2020| No         | Example Notes| Meeting Mins |

    +------------+----------------------+-----------+------------+--------------+--------------+

这是我的代码：

<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>

}

     

Answer 1

如果您认为您需要在循环之前对数组进行排序和分组。这是替换 for 循环的方法示例。<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) {&nbsp; return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request&nbsp; &nbsp; .then((r) => {&nbsp; &nbsp; &nbsp; if (!r.ok) throw new Error("Failed: " + url);&nbsp; // Check for errors&nbsp; &nbsp; &nbsp; return r.json();&nbsp; // parse JSON&nbsp; &nbsp; })&nbsp; &nbsp; .then((data) => data.d.results) // unwrap to get results array&nbsp; &nbsp; .then((results) => {&nbsp; &nbsp; &nbsp; results.forEach((r) => (r.source = source)); // add source to each item&nbsp; &nbsp; &nbsp; return results;&nbsp; &nbsp; });}window.addEventListener("load", function () {&nbsp; Promise.all([&nbsp; &nbsp; loadData("XDeliverables", webAppUrl + "/_api/web/lists/getbytitle('XDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),&nbsp; &nbsp; loadData("YDeliverables", webAppUrl + "/_api/web/lists/getbytitle('YDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),&nbsp; &nbsp; loadData("ZDeliverables", webAppUrl + "/_api/web/lists/getbytitle('ZDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),&nbsp; ])&nbsp; &nbsp; &nbsp; &nbsp; .then(([r1, r2, r3]) => {&nbsp; &nbsp; &nbsp; const objItems = r1.concat(r2,r3);&nbsp; &nbsp; &nbsp; console.log(objItems);&nbsp; &nbsp; &nbsp; var tableContent =&nbsp; &nbsp; &nbsp; &nbsp; '<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +&nbsp; &nbsp; &nbsp; &nbsp; "<td><strong>To</strong></td>" +&nbsp; &nbsp; &nbsp; &nbsp; "<td><strong>Date Submitted</strong></td>" +&nbsp; &nbsp; &nbsp; &nbsp; "<td><strong>Approved</strong></td>" +&nbsp; &nbsp; &nbsp; &nbsp; "<td><strong>Notes</strong></td>" +&nbsp; &nbsp; &nbsp; &nbsp; "<td><strong>Deliverable</strong></td>" +&nbsp; &nbsp; &nbsp; &nbsp; "</tr></thead><tbody>";&nbsp; &nbsp; &nbsp; var sortedObj = {}objItems.forEach(item => {&nbsp; var program = item.Program;&nbsp; delete(item.Program); //remove this line to keep the program in the item data&nbsp; if (!sortedObj[program]) {&nbsp; &nbsp; sortedObj[program] = [];&nbsp; }&nbsp; sortedObj[program].push(item);});//sort by deliverableObject.keys(sortedObj).forEach(key => {&nbsp; sortedObj[key]&nbsp; &nbsp; .sort((a, b) => {&nbsp; &nbsp; &nbsp; if (a.Deliverable === b.Deliverable) {&nbsp; &nbsp; &nbsp; &nbsp; return 0;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; return a.Deliverable > b.Deliverable ? 1 : -1;&nbsp; &nbsp; })});Object.keys(sortedObj).forEach((key, index) => {&nbsp; tableContent += "<tr id='parent-" + index + "' class='parent'>";&nbsp; tableContent += "<td>" + key + "</td>";&nbsp; tableContent += "</tr>";&nbsp; sortedObj[key].forEach(obj => {&nbsp; &nbsp; tableContent += "<tr class='child child-" + index + "'>";&nbsp; &nbsp; tableContent += "<td> </td>";&nbsp; &nbsp; tableContent += "<td>" + obj.To + "</td>";&nbsp; &nbsp; tableContent += "<td>" + obj.Date + "</td>";&nbsp; &nbsp; tableContent += "<td>" + obj.Approved + "</td>";&nbsp; &nbsp; tableContent += "<td>" + obj.Notes + "</td>";&nbsp; &nbsp; tableContent += "<td>" + obj.Deliverable + "</td>";&nbsp; &nbsp; tableContent += "</tr>";&nbsp; });});&nbsp; &nbsp; &nbsp; $("#deliverables").append(tableContent);&nbsp; &nbsp; })&nbsp; &nbsp; .catch((err) => {&nbsp; &nbsp; &nbsp; alert("Error: " + err);&nbsp; &nbsp; &nbsp; console.error(err);&nbsp; &nbsp; });});**strong text**