本文介绍如何修改 javascript 汇总逻辑，使 `counttotal()` 函数仅对 `display !== 'none'` 的行（`
在构建可交互的 HTML 透视表时，常见的做法是通过设置 display: none 隐藏被过滤掉的员工行或流程列。但原始 countTotal() 函数未考虑元素的可见性状态，导致隐藏行/列的数据仍被计入总和，造成统计失真。
解决方案的核心在于：在累加前显式检查每个待处理单元格（或其父容器）的 display 样式是否为 'none'。具体适配如下：
- 列汇总（按员工）：遍历属于某员工类（如 john-doe）的所有 <td> 单元格时，判断 cell.style.display !== 'none' —— 因为列过滤直接作用于 <td>/<th> 元素本身；
- 行汇总（按流程）：遍历属于某流程类（如 design）的所有 <td> 单元格时，需检查 cell.parentNode.style.display !== 'none' —— 因为行过滤作用于 <tr>，而 <td> 自身 display 通常未被显式修改，其可见性由父 <tr> 决定。
以下是优化后的完整函数（已移除冗余注释，增强可读性）：
function countTotal() {
const tables = Array.from(document.getElementsByTagName('tbody'));
tables.forEach(table => {
// 获取所有数据行（跳过表头行和总计行）
const trs = Array.from(table.getElementsByTagName('tr')).slice(1);
// 提取员工类名（跳过总计行 class）
const employees = Array.from(trs.map(tr => tr.childNodes[1].classList[0]))
.filter(cls => cls !== 'total-col');
// 按员工汇总各列（垂直方向）
employees.forEach(employee => {
let colSum = 0;
const cells = Array.from(table.getElementsByClassName(employee)).slice(1, -1);
cells.forEach(cell => {
const textContent = parseFloat(cell.textContent.trim());
if (cell.style.display !== 'none') { // ✅ 关键：仅统计可见单元格
colSum += isNaN(textContent) ? 0 : textContent;
}
});
const totalCell = Array.from(table.getElementsByClassName(employee)).slice(-1)[0];
totalCell.textContent = colSum.toFixed(2); // 使用原生 toFixed 替代非标准 round()
});
// 提取首行（表头）中的流程类名
const headerThs = table.querySelector('tr:first-child').querySelectorAll('th');
const processes = Array.from(headerThs)
.map(th => th.classList[0])
.filter(cls => cls && cls !== 'total-row'); // 过滤空值和总计列
// 按流程汇总各行（水平方向）
processes.forEach(process => {
let rowSum = 0;
const cells = Array.from(table.getElementsByClassName(process)).slice(1, -1);
cells.forEach(cell => {
const textContent = parseFloat(cell.textContent.trim());
// ✅ 关键：检查父 <tr> 是否可见（因行过滤作用于 tr）
if (cell.parentNode.style.display !== 'none') {
rowSum += isNaN(textContent) ? 0 : textContent;
}
});
const totalCell = Array.from(table.getElementsByClassName(process)).slice(-1)[0];
totalCell.textContent = rowSum.toFixed(2);
});
});
}注意事项与最佳实践：
- ✅ 优先使用 textContent 而非 innerHTML：避免意外解析 HTML 标签，提升安全性与性能；
- ✅ 用 isNaN() 替代 Number.isNaN()：更简洁且兼容性更好（parseFloat() 返回 NaN 时 isNaN(NaN) 为 true）；
- ✅ 使用 toFixed(2) 替代 .round(2)：round() 是非标准扩展方法，易引发运行时错误；
- ⚠️ 注意 CSS 层叠影响：element.style.display 仅读取内联样式。若隐藏通过 CSS 类（如 .hidden { display: none; }）实现，应改用 getComputedStyle(element).display === 'none'；
- ? 建议配合防抖调用：在频繁触发的过滤操作后（如 checkbox 切换），使用 setTimeout 或 debounce 避免重复计算。
通过以上改造，countTotal() 真正实现了响应式汇总——无论用户如何勾选员工、流程或活跃状态，所有 totals 始终精准反映当前可视数据集，为业务分析提供可靠依据。
