必须显式写，因浏览器自动补全可能导致queryselectorall('tr')误抓表头行，且ie/旧safari中table.getelementsbytagname('tr')顺序不稳定；过滤时应遍历tbody tr及每行所有td并trim文本，空搜索需重置display为空字符串，大数据量需缓存rowdata减少dom访问。
直接用 row.style.display = 'none' 或 row.hidden = true 控制 <tr> 显隐就能实现按需过滤，但漏掉 tbody 声明、忽略空搜索恢复、不 trim 单元格文本，或只查第一列，都会导致功能失灵。
<h3>为什么必须显式写 <code><tbody>？
<p>浏览器会自动补全 <code><table> 结构，但 <code>querySelectorAll('tr') 可能抓到 <thead> 里的 <code><tr>，甚至把表头当数据行处理。更糟的是，IE 和旧版 Safari 在没写 <code><tbody> 时，<code>table.getElementsByTagName('tr') 返回顺序不稳定。
- 务必手动包裹数据行：
<tbody><tr>...</tr></tbody> - 过滤时只操作
document.querySelectorAll('tbody tr')，避开表头干扰 - 如果已有表格没写
<tbody>，用 JS 动态包一层比硬改 HTML 更稳妥 <h3> <code>filterTable()函数里该遍历哪些<td>？ <p>只查 <code>tr.getElementsByTagName('td')[0]是常见错误——用户搜“北京”却找不到“地址：北京市朝阳区”的行。多列过滤不是“加几列判断”，而是对当前行所有<td> 逐个检查。 <ul> <li>用 <code>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 个 <td> 就是 2500 次 DOM 访问，手机端明显掉帧。
<ul>
<li>页面加载完立刻缓存：<code>const rowData = Array.from(document.querySelectorAll('tbody tr')).map(tr => Array.from(tr.querySelectorAll('td')).map(td => td.textContent.trim()))
rowData 数组，匹配后再批量操作 DOM最易被忽略的点：input 事件监听比 keyup 更可靠——粘贴、自动填充、语音输入都不会漏；closest('tr') 比 parentNode.parentNode 更健壮，尤其当 <td> 里嵌了 <code><div> 或 <code><span></span> 时。
