亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

按特定屬性組織/分組 HTML 表格

按特定屬性組織/分組 HTML 表格

達令說 2022-12-18 16:25:55
我會保持簡短和甜蜜。我有一張桌子,可以打印我需要的一切。我想要做的是將程序 1 下的數據行組合在一起,而不是程序 1 打印、插入數據,然后再次打印,然后再打印另一組數據,我希望它看起來像“預期結果”表。每個程序將有超過 2 個,僅以此為例。我已經堅持了一段時間,似乎無法弄清楚。我還希望能夠以并非所有內容都顯示的方式折疊和展開這些行實際結果:**Expected Result**     +------------+----------------------+-----------+------------+--------------+--------------+    | Program    | To                   |  Date     |   Approved | Notes        | Deliverable  |    +------------+----------------------+-----------+------------+--------------+--------------+    | Program 1  | [email protected]  | 12/23/2018| Yes        | Example Notes| MSR          |    |            | [email protected]  | 03/30/2020| Yes        | Example Notes| Meeting Mins |    +------------+----------------------+-----------+------------+--------------+--------------+    | Program 2  | [email protected]  | 12/23/2018| Yes        | Example Notes| MSR          |    |            | [email protected]  | 12/03/2017| Yes        | Example Notes| Meeting Mins |    +------------+----------------------+-----------+------------+--------------+--------------+    | Program 3  | [email protected]  | 04/17/2020| Yes        | Example Notes| MSR          |    |            | [email protected]  | 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>}     
查看完整描述

1 回答

?
慕森王

TA貢獻1777條經驗 獲得超3個贊

如果您認為您需要在循環之前對數組進行排序和分組。這是替換 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**


查看完整回答
反對 回復 2022-12-18
  • 1 回答
  • 0 關注
  • 94 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號