本文介绍如何通过 jquery 或原生 javascript 过滤掉 html 表格中内容全为空（如仅含空白符、空标签）的 `
在处理动态或手动编辑的 HTML 表格时，常会遇到“看似有行、实则无数据”的情况——例如仅含空 <th> 或 <td> 标签、或内部仅有空白符（如制表符 \t、换行符 \n、空格）的 <tr> 元素。原始代码 $("#myTable tr").length 会统计所有 <tr> 节点，包括这些“空行”，导致计数偏高。
要精准统计非空行（即至少有一个单元格包含可见文本内容），关键在于：对每一行提取其全部文本内容 → 去除首尾空白 → 判断是否为空字符串。
✅ 推荐方案：使用 jQuery + filter()（更健壮、语义清晰）
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
const nonEmptyRows = $("#myTable tr").filter(function() {
// 获取该行所有文本（含 th/td），去除首尾空白后判断
return $.trim($(this).text()) !== "";
});
alert(`非空行数量：${nonEmptyRows.length}`); // 输出：4
});
});
</script>? $.trim() 自动处理各种空白字符（空格、\t、\n、\r），比直接比较 "\t\t" 更可靠，且不受 HTML 缩进格式影响。
✅ 替代方案：纯 JavaScript（无需 jQuery）
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('button').addEventListener('click', () => {
const rows = document.querySelectorAll('#myTable tr');
const nonEmptyCount = Array.from(rows).filter(row =>
row.textContent.trim() !== ''
).length;
alert(`非空行数量：${nonEmptyCount}`);
});
});⚠️ 注意事项
- 表头 <thead> 和脚部 <tfoot> 中的行也参与统计：若需排除 <th> 行（如仅统计 <tbody> 数据行），请改用 $("#myTable tbody tr") 或 document.querySelectorAll('#myTable tbody tr')。
- 隐藏行（display: none）仍被计入：如需跳过隐藏行，可在过滤条件中追加 && $(this).is(':visible')（jQuery）或 row.offsetParent !== null（原生）。
- 空单元格含 或零宽字符？ textContent.trim() 可覆盖常见空白，但若存在 Unicode 零宽空格（U+200B）等特殊字符，建议额外正则清洗：.replace(/[\u200B-\u200D\uFEFF]/g, '').trim()。
✅ 总结
统计非空行的本质是内容校验而非结构计数。避免依赖固定字符串匹配（如 "\t\t"），而应统一使用 textContent + trim() 判断逻辑有效性。该方法兼容各种 HTML 缩进风格、空标签组合及富文本场景，是生产环境推荐的稳健实践。
