本文介绍如何修改 javascript 汇总逻辑，确保 `counttotal()` 函数仅对 `display: none` 状态以外的 `
在构建可交互的透视表（Pivot Table）时，常见的过滤逻辑（如按员工、工序或状态筛选）往往通过设置 element.style.display = 'none' 隐藏对应行或列。然而，原始的 countTotal() 函数未考虑元素的可见性状态，导致被隐藏的单元格仍参与计算，最终汇总结果失真。
要解决该问题，关键在于：在累加前主动检查目标单元格是否实际可见。根据你的 DOM 结构与过滤机制，需区分两类场景：
- 列汇总（按员工）：遍历属于某员工类名（如 john-doe）的所有 <td>/<th>，但仅对 display !== 'none' 的单元格取值；
- 行汇总（按工序）：遍历属于某工序类名（如 design）的所有 <td>，但需检查其父级 <tr> 是否被隐藏（因为工序列是通过隐藏 <td> 和 <th> 实现的，而行汇总依赖整行可见性判断）。
以下是优化后的核心逻辑（已整合进完整函数）：
function countTotal() {
const tables = Array.from(document.getElementsByTagName('tbody'));
tables.forEach(table => {
// 获取除首行（表头）和末行（总计行）外的所有数据行
const trs = Array.from(table.getElementsByTagName('tr')).slice(1, -1);
const employees = Array.from(trs.map(tr => tr.childNodes[1].classList[0]))
.filter(cls => 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()) || 0;
// ✅ 关键修复：仅当单元格自身未被隐藏时才计入
if (window.getComputedStyle(cell).display !== 'none') {
colSum += textContent;
}
});
const totalCell = Array.from(table.getElementsByClassName(employee)).slice(-1)[0];
if (totalCell) totalCell.textContent = colSum.toFixed(2);
});
// 提取首行表头中的工序类名（跳过首列日期和末列总计）
const headerRow = table.querySelector('tr:first-child');
const processHeaders = Array.from(headerRow.querySelectorAll('th:not(:first-child):not(:last-child)'));
const processes = processHeaders.map(th => th.classList[0]).filter(cls => cls);
// 【行汇总】：为每个工序计算其各行中可见单元格之和
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;
// ✅ 关键修复：检查单元格所在行是否可见（因工序列隐藏的是单元格本身，但行汇总需整行有效）
if (cell.parentNode && window.getComputedStyle(cell.parentNode).display !== 'none') {
rowSum += textContent;
}
});
const totalCell = Array.from(table.getElementsByClassName(process)).slice(-1)[0];
if (totalCell) totalCell.textContent = rowSum.toFixed(2);
});
});
}? 为什么用 window.getComputedStyle() 而非 element.style.display？ 因为你在过滤逻辑中使用的是 row.style.display = 'none'（内联样式），看似可用 style.display 判断。但为兼容未来可能通过 CSS 类（如 .hidden { display: none; }）控制显隐，或避免因样式优先级导致 style.display 为空字符串却实际隐藏的情况，强烈推荐使用 getComputedStyle(element).display —— 它返回浏览器最终渲染的计算值，更鲁棒。
此外，还需注意以下实践要点：
- ✅ 避免 innerHTML → 改用 textContent：防止 HTML 标签干扰解析，提升安全性与性能；
- ✅ 使用 toFixed(2) 替代自定义 .round(2)：原代码中 colSum.round(2) 并非标准 JS 方法，易报错；toFixed() 是内置可靠方案；
- ✅ 增加空值防护：对 getElementsByClassName() 返回结果做存在性校验（如 if (totalCell)），避免 Cannot set property 'textContent' of undefined 错误；
- ✅ 优化选择器性能：用 querySelectorAll 替代多次 getElementsByClassName + Array.from，尤其在大型表格中更高效。
最后，建议将 countTotal() 绑定到所有过滤操作之后（例如在员工/工序复选框 change 事件末尾调用），确保每次 UI 更新后汇总值实时同步。这样即可实现真正响应式的、基于可见性的精准数据聚合。
