必须监听 input 事件而非 keyup 或 change，因 input 覆盖粘贴、语音输入、自动填充等所有场景；需显式书写 tbody 标签并用 querySelectorAll('tbody tr') 遍历，逐单元格 trim() 后匹配，500+ 行应缓存单元格内容。
直接用 JavaScript 操作 DOM 就能实现，不需要框架，但必须绕开几个高频翻车点：监听 input 事件而不是 keyup，显式写 <tbody> 标签，逐 <code><td> 遍历而非只查第一列，对文本做 <code>trim() 再匹配，500+ 行时得缓存单元格内容——漏掉任意一个，搜索就可能失灵或卡顿。
为什么不能只监听 keyup
用户粘贴、语音输入、浏览器自动填充时，keyup 根本不触发，搜索框就“假死”。input 事件在值真正变化后立即响应，覆盖所有输入途径。
- 别写
onkeyup="searchTable()"，改用searchInput.addEventListener('input', searchTable) -
change更不行——它只在失焦时触发，搜索体验断层 - 如果表格行数超 200，加
setTimeout节流，避免每敲一个字都重刷 DOM
怎么正确获取并遍历表格行
必须显式使用 <tbody>，否则旧版 Safari 可能不生成该元素，<code>querySelectorAll('tbody tr') 返回空 NodeList。
- HTML 中要手写
<tbody>，不能依赖浏览器自动补全 <li>用 <code>table.querySelectorAll('tbody tr')，别用getElementsByTagName('tr')再手动过滤——后者会把<thead> 行也混进来 <li>跳过无 <code><td> 的行（比如纯表头），避免 <code>row.cells.length === 0导致报错多列匹配逻辑怎么写才不漏数据
只比第一列？那搜“张三”找不到姓名在第二列的行。整行拼接再
toLowerCase()？中文和数字白转，还拖慢性能。立即学习“前端免费学习笔记（深入）”；
- 遍历每行的
row.cells，对每个cell.textContent.trim()单独判断是否includes(filter) - 大小写处理只做一次：
const filter = input.value.trim().toLowerCase()，然后每个单元格文本也转小写再比 - 500+ 行时，提前缓存
rowData = Array.from(rows, r => Array.from(r.cells).map(c => c.textContent?.trim() || ''))，后续只操作数组，不反复读 DOM
多个表格共存时怎么绑定对应关系
全局用
document.getElementById('myTable')一搜全中，根本没法用。关键在建立搜索框与目标表格的显式绑定关系。- HTML 中给搜索框父容器加
data-target="#user-table"或data-target=".order-table" - JS 里用
document.querySelectorAll('[data-target]')批量绑定，每个input只控制对应target选中的表格 - 隐藏/显示统一用
row.style.display = ''恢复显示，别用block或table-row—— 表格行默认是table-row，但显式设值反而容易被 CSS 覆盖
最常被忽略的是
trim()和data-target绑定——前者让“搜 张三 ”匹配不上“张三”，后者让多个搜索框互相污染。这两处不处理，其他都白搭。 - 遍历每行的
