按特定属性组织/分组 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) {

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

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

    });

});**strong text**