原生JavaScript实现表格搜索无需框架，应监听input事件、用querySelectorAll获取tbody行、缓存textContent提升性能、trim搜索词并合理设置display。
直接用原生 JavaScript 就能搞定，不需要 jQuery 或框架，代码轻、兼容好、改起来快。
监听 input 事件而不是 keyup
很多人习惯写 keyup，但用户用粘贴、语音输入、剪贴板操作时，keyup 不会触发。用 input 事件才能捕获所有文本变更。
-
input事件在值真正变化后立即触发，包括 paste、drag-drop、autocomplete 填充 - 避免写成
change，它只在失焦时触发，搜索体验断层 - 如果表格行数超 200 行，建议加
setTimeout节流，防止每敲一个字都重刷 DOM
遍历 tbody 的 tr，跳过 thead
表格结构里 <thead> 是表头，<code><tbody> 才是数据主体。直接用 <code>document.querySelectorAll('#my-table tbody tr') 拿到所有数据行，比用 getElementsByTagName('tr') 再手动过滤更安全。
- 别用
rows[0]这种索引判断表头——万一有colspan合并的复杂表头，索引就错乱了 - 确保你的 HTML 显式写了
<tbody>，否则某些浏览器（如旧版 Safari）可能不生成该元素，导致 <code>querySelectorAll('tbody tr')返回空列表 - 隐藏行用
row.style.display = 'none'，显示用row.style.display = ''（不是'table-row'），避免覆盖 CSS 中定义的 display 类型 - 不要对整行
textContent直接toLowerCase()后匹配——中文、数字、符号大小写不变，但转换开销白费；只需对搜索词和目标文本分别转小写即可 - 若需多列独立筛选（比如“姓名包含张三”且“年龄等于30”），就别用整行模糊匹配，改用
cells[0].textContent和cells[1].textContent分别判断 - 注意空格和全角/半角问题：用户输入“张三 ”（末尾空格）会导致匹配失败，可在比较前用
trim()清理搜索词 - 提前缓存每行的纯文本内容数组，例如
const rowData = Array.from(rows, r => r.textContent)，搜索时只操作这个数组 - 避免在循环里反复调用
querySelector或getElementsByTagName，它们都是 live collection，开销大 - 真要撑到上万行，就得切分页或启用虚拟滚动——但那是另一个问题了，静态表格通常不到 1000 行
匹配逻辑：用 includes 还是 indexOf？
两者都能用，但 includes() 更直观、可读性高，且现代浏览器（Chrome 41+、Firefox 40+、Edge 12+）全部支持，不用 polyfill。
立即学习“前端免费学习笔记（深入）”；
性能卡点：大表格下别反复查 DOM
如果表格有 500+ 行，每次搜索都调用 cells[i].textContent 会触发多次 layout 计算，肉眼可见卡顿。
最易被忽略的一点：搜索框焦点管理。用户清空输入后，所有行应恢复显示，但很多实现忘了重置 display，导致部分行永久消失——务必在搜索词为空时显式设回 ''，别依赖初始状态。
