table.rows.length自动排除display: none和hidden的tr，返回可见行数；querySelectorAll('tr')返回所有tr需手动过滤；统计非空行应检查文本内容而非显示状态。
table.rows.length 会自动排除 display: none 的 tr
直接读 table.rows.length 得到的是当前可见行数，不是原始 DOM 中所有 tr 的数量。这是因为浏览器内部对 rows 集合做了过滤——display: none 的 tr 不会被纳入该类数组。
常见错误是以为它和 querySelectorAll('tr') 返回一样多的节点，其实不然：
-
table.rows是 live HTMLCollection，只包含渲染树中参与布局的tr -
table.querySelectorAll('tr')返回所有匹配元素，不管是否隐藏 - 如果用
table.tBodies[0].rows.length，同样跳过隐藏行（前提是tr在tbody内）
用 querySelectorAll('tr') 统计时必须手动过滤隐藏行
很多动态汇总逻辑习惯写 table.querySelectorAll('tr') 然后遍历，结果把隐藏行也计入总数或求和，造成数据偏差。
正确做法是在循环里加可见性判断：
立即学习“前端免费学习笔记（深入）”；
const rows = table.querySelectorAll('tr');
let visibleCount = 0;
rows.forEach(row => {
if (window.getComputedStyle(row).display !== 'none') {
visibleCount++;
}
});
注意别用 row.style.display === 'none' —— 它读不到 CSS 类或外部样式表设的值，window.getComputedStyle() 才能拿到最终渲染状态。
hidden 属性对行数统计的影响和兼容性坑
tr 上设 hidden 属性效果等同于 display: none，所以 table.rows 同样不包含它。
但要注意兼容性问题：
- IE 完全不支持
hidden属性，tr.hidden = true无效 - Safari ≤12 对
tr上的hidden渲染不稳定，可能残留空白行 - 若用
getElementsByClassName或getElementsByTagName获取tr，它们返回的集合也不含hidden行
统计非空行时，别混淆“隐藏”和“内容为空”
有人想统计“有实际内容的行数”，却误把 display: none 当作判断依据。这两者完全无关：
- 隐藏行可能是有效数据，只是当前被过滤掉
- 未隐藏的空行（比如全是空格或
table.rows中 - 真正要统计非空行，得检查每行内
td或th的文本内容是否 trim 后长度 > 0
关键点在于：行是否可见、是否有内容、是否参与统计，这三件事要分开处理，不能靠一个 display 值混为一谈。
