HTML无法实现搜索过滤，必须用JavaScript；需显式添加<tbody>并用querySelectorAll('tbody tr')避免错筛；应监听input事件而非onkeyup；多列匹配要遍历cells并缓存文本数组；隐藏行时注意容器高度异常。
HTML 本身不能做搜索过滤，所有筛选逻辑必须由 JavaScript 承担；直接写 <input type="search"> 却没 JS 绑定，表格永远不会响应。
为什么 getElementsByTagName('tr') 容易漏行或错筛
浏览器对 <table> 的 DOM 解析不保证自动生成 <tbody>，尤其在旧版 Safari 或手写省略 <tbody> 的 HTML 中，document.getElementById('myTable').getElementsByTagName('tr') 会把 <thead> 行也包进来，甚至混入空行或无 <td> 的行。
- 必须显式写
<tbody>标签，不能依赖自动补全 - 用
table.querySelectorAll('tbody tr')替代getElementsByTagName('tr')，确保只取数据行 - 遍历时加守卫：if (
row.cells.length === 0) continue，避免row.cells[0].textContent报错
input 事件比 onkeyup 更可靠
onkeyup 只捕获键盘释放，漏掉粘贴、拖拽文本、语音输入、自动填充等场景；input 事件监听的是值变更本身，无论来源。
- 绑定方式：
searchInput.addEventListener('input', filterRows) - 不要用
oninput="filterRows()"内联写法，不利于调试和复用 - 如果需兼容 IE11，
input仍可用，但注意其对剪贴板操作的触发时机略滞后
多列模糊匹配怎么写才不漏数据也不卡
只比 row.cells[0].textContent 是常见错误——搜“北京”却找不到地址在第三列的行；整行拼接 row.textContent 再 includes() 看似简单，但中文、emoji、换行符会导致误匹配，且每次读 DOM 开销大。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：遍历
row.cells，对每个单元格单独cell.textContent?.trim().toLowerCase().includes(filter) - 提前缓存文本数组：
const rowData = Array.from(rows, r => Array.from(r.cells).map(c => c.textContent?.trim() || ''))，后续只操作数组，不反复读 DOM - 超过 500 行时，加节流：
setTimeout延迟执行，或用requestIdleCallback避免阻塞主线程
最易被忽略的点是：隐藏行用 tr.style.display = 'none' 后，容器高度不会自动收缩，滚动条位置可能异常；若表格有固定高度或用了 overflow-y: auto，得手动重置 tbody 的 max-height 或改用 visibility: hidden + position: absolute 模拟隐藏（但需额外管理 zIndex 和布局）。
