Javascript 展开和折叠HTML表数据行

我一次又一次地遇到问题。我有一个非常可靠的HTML表功能，但因为它将包含如此多的数据行，所以我也希望有一种简化功能的方法。我想将具有相同“程序字段”的数据行分组，并创建一个展开/折叠函数，该函数将隐藏/显示具有相同程序字段的所有行

下面是我的表格输出的示例。例如，有两个程序使用X作为值，我想创建一个显示“X”的行，并能够单击它，它会将所有具有“X”值的行都下拉下来，如果我再次单击，它将折叠它们

这段YouTube视频正是我想要完成的，但很难理解，因为这个人的所有数据都是硬编码/静态的，因为我的数据是通过请求获取的

这是我的密码：

<script src="/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", "_api/web/lists/getbytitle('xDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("yDeliverables", "_api/web/lists/getbytitle('yDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("zDeliverables", "_api/web/lists/getbytitle('zDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
  ])
    .then(([r1, r2, r3]) => {
      const objItems = r1.concat(r2,r3);
      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 += "<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);
    });
});
function searchTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("deliverablesTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>

<style>
#myInput {
  background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-256.png');
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 30px;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#deliverablesTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#deliverablesTable th, #deliverablesTable td {
  text-align: center;
  padding: 12px;
}

#deliverablesTable tr {
  border-bottom: 1px solid #ddd;
}
#deliverablesTable tr:nth-child(even) {
  background-color: #dddddd;
}

#deliverablesTable tr.header, #deliverablesTable tr:hover {
  background-color: #f1f1f1;
}
</style>
<div id="EmployeePanel">
   <table id='deliverablesTable' style="width: 100%;" border="1 px">
     <tr>
       <td>
          <div id="deliverables" style="width: 100%"></div>
      </td>
    </tr>
 </table>
</div>

 

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”，“\u api/web/List/getbytitle（'xDeliverables'）/items？$select=计划、截止日期、批准日期、备注、交付成果”），
loadData（“yDeliverables”，“api/web/List/getbytitle（'yDeliverables'）/items？$select=计划、截止日期、批准日期、备注、可交付成果”），
loadData（“zDeliverables”，“api/web/lists/getbytitle（“zDeliverables”）/项目？$select=计划、截止日期、批准日期、备注、交付成果”），
])
.然后（[r1，r2，r3]）=>{
const objItems=r1.concat（r2，r3）；
var表格内容=
“程序”+
“至”+
“提交日期”+
“已批准”+
“注释”+
“可交付成果”+
"";
对于（var i=0；i{
警报（“错误：+err”）；
控制台错误（err）；
});
});
函数searchTable（）{
var输入、过滤器、表格、tr、td、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“可交付成果表”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}       
}
}
#我的输入{
背景图像：url（'https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-256.png');
背景位置：左中；
背景重复：无重复；
背景尺寸：30px；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
#可交付成果{
边界塌陷：塌陷；
宽度：100%；
边框：1px实心#ddd；
字号：18px；
}
#可交付成果th、#可交付成果td{
文本对齐：居中；
填充：12px；
}
#可交付的tr{
边框底部：1px实心#ddd；
}
#可交付成果tr:n个子项（偶数）{
背景色：#dddddd；
}
#可交付成果tr.header，#可交付成果tr:hover{
背景色：#f1f1；
}

在每个程序首次出现后创建一行，并在单击该行时分配searchTable（）函数：

window.addEventListener("load", function () {
//Create a empty array
  var programs = new Array();
  Promise.all([
    loadData("xDeliverables", "_api/web/lists/getbytitle('xDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("yDeliverables", "_api/web/lists/getbytitle('yDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("zDeliverables", "_api/web/lists/getbytitle('zDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
  ])
    .then(([r1, r2, r3]) => {
      const objItems = r1.concat(r2,r3);
      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++) {
        if (programs.indexOf(objItems[i].Program)==-1){
          //first occurrence of this Program
          programs.push(objItems[i].Program);
          tableContent += '<tr><td colspan="*" class="searchRow">'+objItems[i].Program+ '</td><tr>';
        }
        tableContent += "<tr>";
        tableContent += "<td>" + objItems[i].Program + "</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>";
      }
      $(tableContent).find('.searchRow').click(function(){
         searchTable($(this).text());
      })
      $("#deliverables").append(tableContent);
    })
    .catch((err) => {
      alert("Error: " + err);
      console.error(err);
    });
});

window.addEventListener（“加载”，函数（）{
//创建一个空数组
var程序=新数组（）；
我保证([
loadData（“xDeliverables”，“\u api/web/List/getbytitle（'xDeliverables'）/items？$select=计划、截止日期、批准日期、备注、交付成果”），
loadData（“yDeliverables”，“api/web/List/getbytitle（'yDeliverables'）/items？$select=计划、截止日期、批准日期、备注、可交付成果”），
loadData（“zDeliverables”，“api/web/lists/getbytitle（“zDeliverables”）/项目？$select=计划、截止日期、批准日期、备注、交付成果”），
])
.然后（[r1，r2，r3]）=>{
const objItems=r1.concat（r2，r3）；
var表格内容=
“程序”+
“至”+
“提交日期”+
“已批准”+
“注释”+
“可交付成果”+
"";
对于（var i=0；ifunction searchTable(srch) {
  if(srch!=== undefined){
    $('#myInput').val(srch)
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("deliverablesTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }