必须显式写<tbody>，因浏览器自动补全可能导致querySelectorAll('tr')误抓表头行，且IE/旧Safari中table.getElementsByTagName('tr')顺序不稳定；过滤时应遍历tbody tr及每行所有td并trim文本，空搜索需重置display为空字符串，大数据量需缓存rowData减少DOM访问。
直接用 row.style.display = 'none' 或 row.hidden = true 控制 <tr> 显隐就能实现按需过滤，但漏掉 tbody 声明、忽略空搜索恢复、不 trim 单元格文本，或只查第一列，都会导致功能失灵。
为什么必须显式写 <tbody>？
浏览器会自动补全 <table> 结构，但 querySelectorAll('tr') 可能抓到 <thead> 里的 <tr>，甚至把表头当数据行处理。更糟的是，IE 和旧版 Safari 在没写 <tbody> 时，table.getElementsByTagName('tr') 返回顺序不稳定。
- 务必手动包裹数据行：
<tbody><tr>...</tr></tbody> - 过滤时只操作
document.querySelectorAll('tbody tr')，避开表头干扰 - 如果已有表格没写
<tbody>，用 JS 动态包一层比硬改 HTML 更稳妥
filterTable() 函数里该遍历哪些 <td>？
只查 tr.getElementsByTagName('td')[0] 是常见错误——用户搜“北京”却找不到“地址：北京市朝阳区”的行。多列过滤不是“加几列判断”，而是对当前行所有 <td> 逐个检查。
- 用
row.querySelectorAll('td')获取该行全部单元格 - 每个
td都要先调用textContent.trim()，否则前后空格会导致匹配失败 - 只要任一
td匹配关键词，整行就保留；全都不匹配才设row.style.display = 'none' - 注意：不要用
innerText，它受 CSS visibility 影响，且在某些浏览器中返回空字符串
空搜索时怎么恢复所有行？
用户删光输入框内容后，如果代码没重置 display，那些之前被隐藏的行就永远消失了。这不是 bug，是逻辑遗漏。
立即学习“Java免费学习笔记（深入）”；
- 在
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 个 <td> 就是 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 更健壮，尤其当 <td> 里嵌了 <div> 或 <span> 时。
