本文详解如何在动态隐藏表格行（<tr>）和列（<td>/<th>）的透视表中，确保 countTotal() 函数仅对可见单元格进行求和，避免因 display: none 元素残留导致的统计偏差。
本文详解如何在动态隐藏表格行（`
在构建可交互式透视表（Pivot Table）时，常通过 element.style.display = 'none' 实现员工或流程维度的动态过滤。但原始的 countTotal() 函数未考虑 DOM 可见性状态，直接遍历所有带特定 class 的元素（如 getElementsByClassName(employee)），导致被隐藏的 <tr> 或 <td> 仍参与计算，最终总和失真。
核心问题在于：
- 列向求和（按员工）：需累加该员工所属的所有 <td> 单元格，但仅当其所在 <tr> 可见（即 tr.style.display !== 'none'）时才计入；
- 行向求和（按流程）：需累加该流程所属的所有 <td> 或 <th>，但仅当其父 <tr> 可见（因列过滤作用于 <td>/<th> 自身，而行过滤作用于整行），故判断依据应为 cell.parentNode.style.display !== 'none'。
✅ 正确解法是在累加前插入可见性校验逻辑：
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 && cls !== 'total-col'); // 替代非标准 .remove()
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()) || 0;
// ✅ 关键修复：仅当所在行可见时才计入
if (cell.parentNode.style.display !== 'none') {
colSum += textContent;
}
});
// 填充该员工列的总计单元格（最后一行同 class 单元格）
const totalCell = Array.from(table.getElementsByClassName(employee)).slice(-1)[0];
if (totalCell) {
totalCell.textContent = colSum.toFixed(2); // 推荐使用 toFixed 而非 .round()
}
});
// 提取流程标识符（首行 th 的 class）
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()) || 0;
// ✅ 关键修复：仅当单元格自身可见时才计入（列过滤直接影响 td/th 显示）
if (cell.style.display !== 'none') {
rowSum += textContent;
}
});
// 填充该流程行的总计单元格（最后一列同 class 单元格）
const totalCell = Array.from(table.getElementsByClassName(process)).slice(-1)[0];
if (totalCell) {
totalCell.textContent = rowSum.toFixed(2);
}
});
});
}? 注意事项与最佳实践：
- 避免 innerHTML → 改用 textContent：更安全、性能更好，且不受 HTML 标签干扰；
- toFixed(2) 替代 .round(2)：原代码中 .round(2) 非原生方法，易报错；Number.prototype.toFixed() 是标准方案；
- .filter() 替代非标准 .remove()：Array.prototype.remove() 并非 JavaScript 原生方法，应使用 filter() 实现健壮过滤；
- 显式空值检查：if (totalCell) 防止因 DOM 结构变化导致脚本中断；
- CSS visibility: hidden 不适用此逻辑：本方案仅响应 display: none；若使用 visibility，需改用 getComputedStyle(cell).visibility !== 'hidden'；
- 性能提示：若表格极大，可考虑缓存 getElementsByClassName() 结果或使用 document.querySelectorAll() 配合属性选择器优化。
通过以上改造，countTotal() 将严格遵循当前 UI 过滤状态，实现“所见即所算”，确保透视表统计结果始终与用户视图保持一致。
