应绑定input事件实现实时搜索，用textContent提取纯文本逐td匹配，trim后统一toLowerCase比对，通过style.display控制显隐而非remove或visibility。

搜索框绑定 input 事件而不是 click

用户常误以为点一下搜索按钮才触发过滤，结果输入时表格没反应。实际应监听 input 事件——它在每次输入、粘贴、删除时都触发，体验更实时。用 keyup 容易漏掉鼠标粘贴或长按删除，change 又只在失焦时触发，都不合适。

• 给搜索 <input> 绑定 addEventListener('input', handler)
• handler 中先 trim() 去首尾空格，空字符串时直接显示全部行
• 避免在 handler 里重复获取 document.querySelectorAll('tbody tr')，提取为变量复用

逐行匹配 td 文本而非 innerHTML

直接比对 tr.innerHTML 会把标签、空格、换行符全算进去，导致“搜‘张三’却匹配不到”，因为实际内容夹在 <td>张三</td> 里。必须遍历每行的每个 <td>，用 textContent 提取纯文本再搜索。

• 对每一行 tr，执行 Array.from(tr.querySelectorAll('td')).some(td => td.textContent.includes(keyword))
• 不用 innerText，它受 CSS 隐藏影响；textContent 更可靠
• 大小写敏感？加 .toLowerCase() 统一转换，但注意原始数据含大小写混合时需同步处理

隐藏/显示行用 style.display 而非 remove

有人用 tr.remove() 清掉不匹配的行，结果搜完没法恢复——DOM 已丢失。正确做法是控制 display 样式：匹配时设为 ''（还原默认），不匹配时设为 'none'。

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

• 初始化时确保所有 tr 没有内联 style.display，否则会覆盖 JS 设置
• 别用 visibility: hidden，它占布局空间，表格会留空白缝隙
• 如果表格有分页或排序逻辑，这个方案仍可兼容，因 DOM 结构未变

性能卡顿？加防抖但别过度

小表格（setTimeout 反而让搜索延迟半秒，用户觉得卡。只有当行数超 500 或字段特别多（如每行 20 列）时，才值得加简单防抖。

立即学习“前端免费学习笔记（深入）”；

• 防抖只需 200–300ms，太长用户感知滞后，太短失去意义
• 用 clearTimeout + 新定时器，别用 Lodash —— 就几行代码，不值得引入依赖
• 真正慢的点常在反复调用 querySelectorAll，把 tbody 和所有 tr 缓存到变量里

表格搜索本质是“查文本+切显隐”，不是功能堆砌。最易被忽略的是：搜索词为空时必须还原所有行，且不能靠重载页面——这步漏了，用户清空输入框后表格就永远空白了。