HTML表格数据按需过滤的JavaScript实现与行显隐

表格数据按需过滤看似基础，但许多开发者在实际实现中仍会遇到不少陷阱。核心思路是通过 JavaScript 控制 元素的显示与隐藏，然而若遗漏了 声明、未处理空搜索恢复、忽略文本 trim、或仅查询第一列等细节，往往会导致功能失灵。

首先来看第一个关键要点：为什么必须显式声明 ？

浏览器会自动补全表格结构，但使用 querySelectorAll('tr') 时，很容易将 中的表头行也一并抓取，误当作普通数据行处理。更糟糕的是，在 IE 和旧版 Safari 中，若 HTML 里缺少 ，table.getElementsByTagName('tr') 返回的顺序甚至可能不稳定。因此，务必手动将数据行包裹在 中：...。过滤时仅操作 document.querySelectorAll('tbody tr')，即可干净地避开表头干扰。如果已有现成表格结构且未写 ，使用 JavaScript 动态包裹一层也是更稳妥的选择，比直接修改 HTML 更为省事。

filterTable() 函数中应遍历哪些 ？

常见错误是仅查询 tr.getElementsByTagName('td')[0]——例如用户搜索“北京”，却找不到“地址：北京市朝阳区”这一行。多列过滤并非简单增加几列判断，而是需要对当前行的所有 逐一检查。

• 使用 row.querySelectorAll('td') 获取该行的所有单元格。
• 每个 td 应先调用 textContent.trim()，否则前后空格可能导致匹配失败。
• 只要任一 td 匹配关键词，整行即保留；若全不匹配，则设为 row.style.display = 'none'。
• 注意：避免使用 innerText，该属性受 CSS visibility 影响，在某些浏览器中可能返回空字符串。

空搜索时如何恢复所有行？

用户清空输入框内容后，如果代码未重置 display，那些隐藏的行将永远消失。这虽不算 bug，但属于逻辑上的遗漏。

• 在 filterTable() 开头增加判断：if (!filter.trim()) { rows.forEach(r => r.style.display = '') }。
• 不要使用 r.style.display = 'table-row'——如果原始 HTML 中某行的 display 为 flex 或其他值，这样硬设会覆盖原有样式。
• 设为空字符串 '' 最稳妥，浏览器会回退到默认的 table-row，兼容性也最好。
• 如果当初使用 row.hidden = true，对应的恢复操作就是 row.hidden = false，语义上更清晰。

500 行以上表格卡顿？缓存 rowData 是关键

每次输入都重新读取 DOM，500 行表格、每行 5 个 ，总计 2500 次 DOM 访问。在手机上，掉帧现象会非常明显。

• 页面加载完成后立即缓存数据：const rowData = Array.from(document.querySelectorAll('tbody tr')).map(tr => Array.from(tr.querySelectorAll('td')).map(td => td.textContent.trim()))。
• 搜索时只遍历 rowData 数组，匹配结果后再批量操作 DOM。
• 缓存之后，DOM 的读取次数从 O(n×m) 降至 O(1)，虽然渲染仍是 O(n)，但用户的流畅感受是实实在在的。
• 需要注意：如果表格支持动态增删行，缓存必须同步更新，否则数据会错位。

最后，有一个极易被忽略的细节：input 事件监听比 keyup 更可靠，能够捕获粘贴、自动填充、语音输入等操作；而使用 closest('tr') 比 parentNode.parentNode 更健壮，尤其是在 内部嵌套了

或 时。