js获取table指定列的内容如果这列每行内容相同时进行某一列的数量合并
当前位置：点晴教程→知识管理交流
→『 技术文档交流 』
 ：js获取table指定列的内容如果这列每行内容相同时进行某一列的数量合并 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <table id="myTable"> <thead> <tr> <th>名称</th> <th>类别</th> <th>数量</th> </tr> </thead> <tbody> <tr> <td>苹果</td> <td>水果</td> <td>10</td> </tr> <tr> <td>苹果</td> <td>水果</td> <td>15</td> </tr> <tr> <td>香蕉</td> <td>水果</td> <td>8</td> </tr> <tr> <td>香蕉</td> <td>水果</td> <td>7</td> </tr> </tbody> </table> </body> <script> function mergeQuantityByColumn(tableId, keyColumnIndex, quantityColumnIndex) { const table = document.getElementById(tableId); const tbody = table.tBodies[0]; const rows = Array.from(tbody.rows);
// 用一个Map来存储每个key列的值对应的总数量和第一个对应行索引 const map = new Map();
for (let i = 0; i < rows.length; i++) { const key = rows[i].cells[keyColumnIndex].innerText.trim(); const quantity = parseFloat(rows[i].cells[quantityColumnIndex].innerText.trim()) || 0;
if (map.has(key)) { // 累加数量 const entry = map.get(key); entry.totalQuantity += quantity; entry.rows.push(rows[i]); } else { map.set(key, { totalQuantity: quantity, rows: [rows[i]] }); } }
// 遍历Map，更新第一个对应行的数量列，隐藏其他行 for (const [key, entry] of map.entries()) { const firstRow = entry.rows[0]; firstRow.cells[quantityColumnIndex].innerText = entry.totalQuantity; // 如果有多余的重复行，隐藏它们 for (let i = 1; i < entry.rows.length; i++) { entry.rows[i].style.display = "none"; } } } //mergeQuantityByColumn("myTable", 0, 2); </script> </html> 该文章在 2025/7/31 11:15:16 编辑过 |
关键字查询
相关文章
正在查询... 
|
400 186 1886
