本文介绍如何在前端动态隐藏表格行（<tr>）或单元格（<td>/<th>）后，仍能准确计算每列员工小计与每行流程小计，关键在于跳过 display: none 的元素参与求和运算。
本文介绍如何在前端动态隐藏表格行（`
在构建可交互的 HTML 透视表（Pivot Table）时，常通过 JavaScript 动态控制行/列的显示状态（如员工筛选、流程筛选、活跃状态筛选），并使用 element.style.display = 'none' 隐藏不匹配项。但原始的 countTotal() 函数在汇总时未考虑可见性，导致被隐藏的数值仍被计入合计，造成数据失真。
要解决该问题，核心原则是：仅对当前可见的单元格执行数值解析与累加。具体需分两类处理：
✅ 列方向求和（员工小计）：检查单元格自身可见性
当按员工维度统计各流程耗时总和（即每列下方的 total-col 单元格）时，每个 <td> 或 <th> 是否参与计算，取决于其自身的 display 样式：
cells.forEach(cell => {
const textContent = parseFloat(cell.textContent.trim()) || 0;
// ✅ 关键判断：仅当单元格本身可见时才计入
if (window.getComputedStyle(cell).display !== 'none') {
colSum += textContent;
}
});? 使用 window.getComputedStyle(cell).display 比直接读取 cell.style.display 更可靠，因为它能正确识别由 CSS 规则、父级隐藏或 !important 导致的最终渲染状态。
✅ 行方向求和（流程小计）：检查单元格父行可见性
当按流程维度统计各员工耗时总和（即每行末尾的 total-row 单元格）时，某 <td> 是否有效，取决于其所在 <tr> 是否可见——因为整行员工数据被隐藏时，该行所有流程值均应排除：
cells.forEach(cell => {
const textContent = parseFloat(cell.textContent.trim()) || 0;
// ✅ 关键判断：检查父 <tr> 是否可见（注意：cell.parentNode 是 <tr>）
const parentRow = cell.parentNode;
if (window.getComputedStyle(parentRow).display !== 'none') {
rowSum += textContent;
}
});⚠️ 注意：不要误用 cell.style.display 判断行方向求和——隐藏的是 <tr>，不是 <td>；<td> 自身样式可能为空，但其父行已设为 display: none。
✅ 完整优化后的 countTotal() 函数
function countTotal() {
const tables = Array.from(document.querySelectorAll('tbody'));
tables.forEach(table => {
// 获取除首行（表头）和末行（总计行）外的所有数据行
const trs = Array.from(table.querySelectorAll('tr')).slice(1, -1);
const employees = [...new Set(trs.map(tr => tr.cells[1]?.classList[0]))].filter(c => c !== 'total-col');
// ? 列求和：员工维度（每列一个员工类名）
employees.forEach(employee => {
let colSum = 0;
const cells = Array.from(table.querySelectorAll(`.${employee}`)).slice(1, -1); // 跳过首列（姓名）和末列（总计）
cells.forEach(cell => {
const val = parseFloat(cell.textContent?.trim()) || 0;
if (window.getComputedStyle(cell).display !== 'none') {
colSum += val;
}
});
const targetCell = Array.from(table.querySelectorAll(`.${employee}`)).at(-1);
if (targetCell) targetCell.textContent = colSum.toFixed(2);
});
// ? 行求和：流程维度（从第一行 th 提取类名）
const headerThs = Array.from(table.querySelector('tr:first-child').querySelectorAll('th')).slice(1, -1);
const processes = headerThs.map(th => th.classList[0]).filter(Boolean);
processes.forEach(process => {
let rowSum = 0;
const cells = Array.from(table.querySelectorAll(`.${process}`)).slice(1, -1); // 跳过首行（表头）和末行（总计）
cells.forEach(cell => {
const val = parseFloat(cell.textContent?.trim()) || 0;
const parentRow = cell.parentNode;
if (window.getComputedStyle(parentRow).display !== 'none') {
rowSum += val;
}
});
const targetCell = Array.from(table.querySelectorAll(`.${process}`)).at(-1);
if (targetCell) targetCell.textContent = rowSum.toFixed(2);
});
});
}? 补充说明与最佳实践
- 避免 innerHTML → 改用 textContent：更安全（防 XSS）、更准确（忽略标签干扰）；
- 容错增强：使用可选链 ?. 和空值合并 || 0 防止 null/undefined 报错；
- 性能提示：若表格极大，可考虑缓存 getComputedStyle 结果或使用 MutationObserver 按需触发重算；
- CSS 优先级兼容性：getComputedStyle 自动处理内联样式、CSS 类、媒体查询等所有影响，无需手动判断来源；
- 扩展建议：后续可封装为 PivotCalculator 类，支持自定义聚合函数（如平均值、最大值）、异步加载、撤销/重做等能力。
通过以上改造，无论用户如何组合筛选条件（隐藏任意员工行或流程列），合计值始终严格基于当前可见数据实时更新，确保分析结果真实可信。
