js动态给table加上合计行
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
:js动态给table加上合计行 <script> function sortTableByColumn_count(myTable, columnIndex, isNumber) { const table = document.getElementById(myTable); var tb ody = table.tBodies[0]; var rows = Array.from(tbody.rows); var firstRow = rows.shift(); tbody.deleteRow(0); // 移除原始的表头 table.insertBefore(firstRow, tbody); // 将表头重新添加到表格 rows.sort(function(a, b) { var cellA = a.cells[columnIndex]; var cellB = b.cells[columnIndex]; if (isNumber) { return parseFloat(cellA.textContent) - parseFloat(cellB.textContent); } else { return cellA.textContent.localeCompare(cellB.textContent); } });
// 计算每个数值出现的次数 var counts = rows.reduce(function(counts, row) { var value = row.cells[columnIndex].textContent; counts[value] = (counts[value] || 0) + 1; return counts; }, {});
// 根据出现次数倒序排序 rows.sort(function(a, b) { return counts[b.cells[columnIndex].textContent] - counts[a.cells[columnIndex].textContent]; });
for(var i = 0; i < rows.length; i++) { tbody.appendChild(rows[i]); } } function deleteLastRow(myTable) { var table = document.getElementById(myTable); // 获取table元素 var rows = table.getElementsByTagName("tr"); // 获取所有行 if (rows.length > 1) { // 确保至少还有一行 table.deleteRow(rows.length - 1); // 删除最后一行 } } function insertlasttr(myTable){ var table = document.getElementById(myTable); var existingRow = table.rows[0]; var newRow = table.insertRow(-1); for (var k = 0; k < table.rows[0].cells.length; k++) { var newCell = newRow.insertCell(k); newCell.rowSpan = existingRow.cells[k].rowSpan; newCell.colSpan = existingRow.cells[k].colSpan; newCell.style.cssText = existingRow.cells[k].style.cssText; } } function countvalueshow(myTable,colindex){ const table = document.getElementById(myTable); const rows = table.getElementsByTagName('tr'); const colCount = colindex; // 第二列的索引是1,因为索引从0开始 let countMap = {}; for (let i = 1; i < rows.length; i++) { // 跳过表头 const cell = rows[i].getElementsByTagName('td')[colCount]; const age = cell.textContent.trim(); if (countMap[age]) { countMap[age].count++; } else { countMap[age] = { count: 1 }; } } return countMap; } function updateSerialNumbers(middleTable) { const table = document.getElementById(middleTable); const rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr"); let serialNum = 1; for (let i = 1; i < rows.length; i++) { const row = rows[i]; // 检查行是否为可见 if (row.style.display !== "none") { // 将序号设置到第一列 row.cells[0].innerText = serialNum; serialNum++; } } } // 调用函数以更新序号 function sortTableByColumn(myTable, columnIndex) { var table = document.getElementById(myTable); var tbody = table.tBodies[0]; var rows = Array.prototype.slice.call(tbody.rows, 1); rows.sort(function(a, b) { var cellA = a.cells[columnIndex]; var cellB = b.cells[columnIndex]; if (cellA.textContent < cellB.textContent) { return -1; } if (cellA.textContent > cellB.textContent) { return 1; } return 0; }); table.removeChild(tbody); for (var i = 0; i < rows.length; i++) { tbody.appendChild(rows[i]); } table.appendChild(tbody); } function insertSumRow(tableId, columnIndex,totalindex) { var table = document.getElementById(tableId); var existingRow ; var secondRowStyle; var rows = table.rows; for (var i = 1; i < rows.length - 1; i++) { var currentCellValue = rows[i].cells[columnIndex].innerText; var nextCellValue = rows[i + 1].cells[columnIndex].innerText; secondRowStyle = window.getComputedStyle(table.rows[i]); existingRow = table.rows[i]; objArray=countvalueshow('myTable',columnIndex) if (currentCellValue !== nextCellValue&&objArray[currentCellValue].count>1) { // 创建合计行并插入 var newRow = table.insertRow(i + 1); for (var j = 0; j < secondRowStyle.length; j++) { var prop = secondRowStyle[j]; newRow.style[prop] = secondRowStyle.getPropertyValue(prop); } for (var k = 0; k < table.rows[0].cells.length; k++) { var newCell = newRow.insertCell(k); // 设置单元格的rowSpan和colSpan属性 newCell.rowSpan = existingRow.cells[k].rowSpan; newCell.colSpan = existingRow.cells[k].colSpan; // 设置单元格内容和样式 if(k==0){ newCell.textContent = "合计:"; } else if(k==totalindex){ newCell.textContent =""; } else { newCell.textContent = existingRow.cells[k].textContent; } newCell.style.cssText = existingRow.cells[k].style.cssText; } i++; // 行数增加1,因为插入了新行 } } } function sumThirdColumnExceptTotal(myTable,colindex,totalcolindex) { var table = document.getElementById(myTable); // 获取表格元素 var sum = 0; var end=1; // 从第二行开始遍历 for (var i = 1, row; row = table.rows[i]; i++) { // 获取第一列的文本内容 var firstCellText = row.cells[colindex].textContent || row.cells[colindex].innerText; // 如果包含“合计”字样,跳过累加 if (firstCellText.includes('合计')) { for (var k = end;k<i; k++) { if(table.rows[k].cells[3].textContent==table.rows[k+1].cells[3].textContent){ sum=sum-(-table.rows[k].cells[totalcolindex].textContent); } } table.rows[i].cells[totalcolindex].textContent=sum; sum = 0; end=i+1; }
} } //首先给按第某列内容排序 sortTableByColumn_count("myTable", 3, true); //排序完后更新序号 updateSerialNumbers("myTable"); //插入一条空白行 insertlasttr("myTable"); //添加一行合计行 insertSumRow('myTable',3,6); //最后给合计合计数量 sumThirdColumnExceptTotal('myTable',0,6); //删除最后一条空白行 deleteLastRow("myTable"); </script> 该文章在 2024/12/6 9:37:35 编辑过 |
关键字查询
相关文章
正在查询... |