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 編輯過 |
關鍵字查詢
相關文章
正在查詢... |