如何根据分组行添加新的 <th>？

Question

我不确定如何根据每个分组表创建自定义标题。

目前表格组合在一起，但它只显示 1 行带有一个加号，您几乎看不到。

我想要尝试做的是用第一个 td 项目的标题名称替换行信息以显示行中有多少项目。

我想要做什么的例子

What I currently have

What I would like it to do

//Making timesheet <td>
fetch(timehsheetUrl + date)
    .then(response => response.json())
    .then(data => makeTable(data.contracts))
    .catch(error => console.log(`Oh no! ${error}`))
const makeTable = (contracts) => {
    console.log(contracts);
    const body = document.getElementById('tsdata');
    contracts.forEach((person, index) => {
        person.details.forEach((entry) => {
            const dateString = entry.timesheetDate;
            const dateObject = new Date(dateString);
            const dd = dateObject.getDate();

            const mm = dateObject.toLocaleString('en-us', {
                month: 'short'
            });
            const yyyy = dateObject.getFullYear();
            const chartDate = `${dd}-${mm}-${yyyy}`
            console.log(chartDate);

            const htmlTemplate = `
    <tr class = "testDeleteTimesheet">
      <td>${entry.contractCode}</td>
      <td class="timesheetDetailsID" style="display:none;">${entry.timesheetDetailsId}</td>
      <td>${entry.activityCode}</td>
      <td>${entry.otFlag}</td>
      <td>${entry.notes}</td>
<td>${chartDate}</td>
<td class = "totalHours">${entry.hours}</td>
<td><button id=\"edit-" + counter + "\" class=\"btn editRow btnStyle btn-primary btn-sm\"><span class=\ "bi bi-pencil\"></span></button> 
<button id=\"delete-" + counter + "\" class=\"btn delRow btnStyle btn-danger btn-sm\"><span class=\"bi bi-eraser\"></span></button></td>
    </tr>
    `;

            body.innerHTML += htmlTemplate;
        });
        //Making timesheet easier to read

const tables = $('table')[0];
const rowGroups = {};
//loop through the rows excluding the first row (the header row)
while(tables.rows.length > 1){
    const row = tables.rows[1];
    const id = $(row.cells[0]).text();
    if(!rowGroups[id]) rowGroups[id] = [];
    if(rowGroups[id].length > 0){
        row.className = 'subrow';
        $(row).slideUp();
    }
    rowGroups[id].push(row);
    tables.deleteRow(1);
}
//loop through the row groups to build the new table content
for(let id in rowGroups){
    const group = rowGroups[id];
    for(let j = 0; j < group.length; j++){
        const row = group[j];
        if(group.length > 1 && j == 0) {
            //add + button
            const lastCell = row.cells[row.cells.length - 1];           
            $("<span class='collapsed'>").appendTo(lastCell).click(plusClick);
            
        }
        tables.tBodies[0].appendChild(row);        
    }
}
//function handling button click
function plusClick(e){
    const collapsed = $(this).hasClass('collapsed');
    const fontSize = collapsed ? 14 : 0;
    $(this).closest('tr').nextUntil(':not(.subrow)').slideToggle(400)
           .css('font-size', fontSize);
    $(this).toggleClass('collapsed');  
    
}
    });

};

我的 api 样例：

"contracts": 
[
    {
      "contractID": "Test1",
      "details": [
        {
          "timesheetDetailsId": 111111,
          "timesheetId": 0,
          "timesheetDate": "2021-11-01T00:00:00",
          "timesheetDayNumber": 1,
          "contractCode": "Test1",
          "activityCode": "GRA",
          "hours": 7.5,
          "otFlag": false,
          "notes": "Testing",
          "approved": false,
          "overUnder": 0.0,
          "employeeCode": "N-0510"
        },
        {
          "timesheetDetailsId": 111113,
          "timesheetId": 0,
          "timesheetDate": "2021-11-03T00:00:00",
          "timesheetDayNumber": 3,
          "contractCode": "Test1",
          "activityCode": "GRA",
          "hours": 7.5,
          "otFlag": false,
          "notes": "Testing",
          "approved": false,
          "overUnder": 0.0,
          "employeeCode": "N-0510"
        }
      ]
       "contractID": "Test2",
       "details": [
        {
          "timesheetDetailsId": 111112,
          "timesheetId": 0,
          "timesheetDate": "2021-11-02T00:00:00",
          "timesheetDayNumber": 2,
          "contractCode": "Test2",
          "activityCode": "GRA",
          "hours": 7.5,
          "otFlag": false,
          "notes": "Testing",
          "approved": false,
          "overUnder": 0.0,
          "employeeCode": "N-0510"
        }
      ]
]

Answer 1

让我们整理一下。

您可以一次性完成此操作，您可以通过数组中的元素数知道组中有多少项。您还可以将每个“组”包装在 tbody 元素中。

接下来我们将使用一个文档片段，以便我们只更新一次 DOM，这将减少重绘，如果有很多项目，这很重要。

然后我们将使用事件委托来处理动态添加元素的点击事件。我还使用了数据属性而不是隐藏单元格。

//Making timesheet <td>
/*  Mocked some datat to emualte call
fetch(timehsheetUrl + date)
    .then(response => response.json())
    .then(data => makeTable(data.contracts))
    .catch(error => console.log(`Oh no! ${error}`))
*/

const makeTable = (contracts) => {
  const body = document.getElementById('tsdata');
  //Create a fragment to work with
  var fragment = new DocumentFragment();
  contracts.contracts.forEach((person, index) => {
    /*Create a group header row for each "person"*/
    let groupRow = document.createElement("tr");
    groupRow.classList.add("group_row");
    groupRow.innerHTML = `<td colspan="8">${person.contractID} : Found ${person.details.length}</td>`
    /*Create a tbody to hold each group*/
    let groupBody = document.createElement("tbody");
    groupBody.classList.add("group_body");
    /*Append to fragment*/    
    fragment.appendChild(groupRow);
    fragment.appendChild(groupBody);
    
    person.details.forEach((entry) => {
     
      const dateString = entry.timesheetDate;
      const dateObject = new Date(dateString);
      const dd = dateObject.getDate();

      const mm = dateObject.toLocaleString('en-us', {
        month: 'short'
      });
      const yyyy = dateObject.getFullYear();
      const chartDate = `${dd}-${mm}-${yyyy}`
      const htmlTemplate = `
    <tr class = "testDeleteTimesheet" data-timesheetdetailsid="${entry.timesheetDetailsId}">
      <td>${entry.contractCode}</td>    
      <td>${entry.activityCode}</td>
      <td>${entry.otFlag}</td>
      <td>${entry.notes}</td>
<td>${chartDate}</td>
<td class = "totalHours">${entry.hours}</td>
<td><button id=\"edit-" + counter + "\" class=\"btn editRow btnStyle btn-primary btn-sm\"><span class=\ "bi bi-pencil\"></span></button> 
<button id=\"delete-" + counter + "\" class=\"btn delRow btnStyle btn-danger btn-sm\"><span class=\"bi bi-eraser\"></span></button></td>
    </tr>
    `;
      /*Update the group  body*/
      groupBody.innerHTML += htmlTemplate;
    });
  });
  //Append the fragment to the table
  body.appendChild(fragment);
};

/*Event listener to toggle expantion, bound to table so we can use dynamically added element*/
document.getElementById("tsdata").addEventListener("click", function(event){
  /*Check the target of the event*/
  if(event.target.matches(".group_row>td")){
    //Toggle the class on the row and let CSS do the rest
    event.target.closest(".group_row").classList.toggle("expanded");
  }
});

let data = {
  "contracts": [{
    "contractID": "Test1",
    "details": [{
        "timesheetDetailsId": 111111,
        "timesheetId": 0,
        "timesheetDate": "2021-11-01T00:00:00",
        "timesheetDayNumber": 1,
        "contractCode": "Test1",
        "activityCode": "GRA",
        "hours": 7.5,
        "otFlag": false,
        "notes": "Testing",
        "approved": false,
        "overUnder": 0.0,
        "employeeCode": "N-0510"
      },
      {
        "timesheetDetailsId": 111113,
        "timesheetId": 0,
        "timesheetDate": "2021-11-03T00:00:00",
        "timesheetDayNumber": 3,
        "contractCode": "Test1",
        "activityCode": "GRA",
        "hours": 7.5,
        "otFlag": false,
        "notes": "Testing",
        "approved": false,
        "overUnder": 0.0,
        "employeeCode": "N-0510"
      }
    ]
  }, {
    "contractID": "Test2",
    "details": [{
      "timesheetDetailsId": 111112,
      "timesheetId": 0,
      "timesheetDate": "2021-11-02T00:00:00",
      "timesheetDayNumber": 2,
      "contractCode": "Test2",
      "activityCode": "GRA",
      "hours": 7.5,
      "otFlag": false,
      "notes": "Testing",
      "approved": false,
      "overUnder": 0.0,
      "employeeCode": "N-0510"
    }]
  }]
};

makeTable(data);

table{width:90%;}

/*Hide TBody By Default*/
.group_row:not(.expanded) + tbody {height:0; display:none;}
/*Set the cell to relative to position +/-*/
.group_row > td {position:relative;}
/*Expand Collapes indicator*/
.group_row > td::after {
  position:absolute;
  right: 5px;
  content: "+";
}

/*Change indicator*/
.group_row.expanded > td::after {content:"-";}

<table id="tsdata">
  <thead>
    <tr>
      <th>Contract Code</th>
      <th>Activity Code</th>
      <th>Overtime</th>
      <th>Notes</th>
      <th>Date</th>
      <th>Total Hours</th>
      <th> </th>
      <th> </th>
    </tr>
  </thead>
</table>