原生 javascript 实现表格搜索需避开五大翻车点：用 input 而非 keyup 保证粘贴/自动填充响应；显式声明 tbody 并用 queryselectorall('tbody tr') 避免兼容问题；逐单元格 trim 后匹配，不只查第一列；500+ 行时缓存 rowdata 减少 dom 访问；多表格通过 data-target 显式绑定，空搜索恢复所有行并自动选中文本。
直接用原生 JavaScript 就能实现，不需要框架，但必须避开几个高频翻车点：input 事件监听、tbody 显式声明、逐 td 遍历而非只查 td[0]、trim() 清空格、用 row.style.display = '' 恢复显示——漏掉任意一个，搜索就可能失灵或卡顿。
为什么用 input 而不是 keyup？
用户粘贴文本、用语音输入、触发浏览器自动填充时，keyup 根本不触发，搜索框就“假死”。input 事件在值真正变化后立即响应，覆盖所有输入途径。
- 别写
onkeyup="searchTable()"，改用searchInput.addEventListener('input', searchTable) - 如果表格行数超 200，加
setTimeout节流，避免每敲一个字都重刷 DOM -
change更不行——它只在失焦时触发，搜索体验断层
如何正确获取并遍历表格数据行？
必须显式使用 tbody，否则旧版 Safari 可能不生成该元素，querySelectorAll('tbody tr') 返回空 NodeList。
- HTML 中要写明
<tbody>，不能依赖浏览器自动补全 <li>用 <code>table.querySelectorAll('tbody tr')，别用getElementsByTagName('tr')再手动过滤——后者会把thead行也混进来 - 跳过无
td的行（比如纯表头），避免row.cells.length === 0导致报错 - 遍历每行的
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 - HTML 中给搜索框父容器加
data-target="#user-table"或data-target=".order-table" - JS 里用
document.querySelectorAll('[data-target]')批量绑定，每个input只控制对应target选中的表格 - 隐藏/显示统一用
row.style.display = 'none'和row.style.display = ''，别用'table-row'——它可能覆盖 CSS 里定义的 display 类型
匹配逻辑怎么写才不漏数据、不卡顿？
只比第一列？那搜“张三”找不到姓名在第二列的行。整行拼接再 toLowerCase()？中文和数字白转，还拖慢性能。
多个表格共存时怎么避免互相干扰？
全局用 document.getElementById('myTable') 一搜全中，根本没法用。关键在建立搜索框与目标表格的显式绑定关系。
最容易被忽略的是：搜索框获得焦点后没自动选中内容，用户每次都要手动删旧词；还有空搜索时忘记恢复所有行，导致上一轮结果残留。这些细节不处理，用户第一印象就打折扣。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
