直接操作tr元素比filter()更轻量高效，推荐用querySelectorAll()配合display控制显隐，输入防抖用setTimeout，精确匹配指定列，fallback处理textContent为空，搜索后重置滚动位置。
表格搜索用 filter() 还是 querySelectorAll()？
直接遍历 tr 元素比用数组 filter() 更轻量、更可控，尤其对几百行以内的表格。浏览器原生 DOM 操作响应更快，避免把整张表转成数组再映射回 DOM 的额外开销。
常见错误是先用 Array.from(table.querySelectorAll('tbody tr')) 转数组，再 filter() + forEach() 控制显隐——这多了一次 DOM → Array → DOM 的往返，且容易因异步或引用失效漏掉某些行。
- 推荐直接操作
tr元素集合：table.querySelectorAll('tbody tr') - 搜索前先统一设
tr.style.display = ''（清空上次状态） - 匹配失败时设
tr.style.display = 'none'，成功则保持默认（不设） - 注意：不要用
visibility: hidden，它仍占布局空间，影响滚动和点击穿透
input 输入实时触发过滤，怎么防抖？
用户每敲一个键就查一次，小数据量可能看不出问题，但表格超 100 行或字段含中文时，连续触发会卡顿，甚至出现“输入 ab 却只显示 a 的结果”这种竞态问题。
不用第三方库也能简单防抖：用 setTimeout + clearTimeout 记录上一个定时器 ID，每次输入重置。延迟设 200ms 是平衡响应与性能的常见值。
立即学习“前端免费学习笔记（深入）”；
- 绑定
input事件（不是change），确保实时响应 - 在事件回调里先
clearTimeout(lastTimer)，再lastTimer = setTimeout(...) - 注意闭包中变量作用域，
lastTimer必须是外层可访问的变量（如放在函数外或用let声明） - 首次输入或清空搜索框时，也要触发一次全量显示，别漏掉
搜索逻辑该匹配整行还是指定列？
多数场景不需要全文本模糊匹配整行——比如订单表里搜 “北京”，结果把“北京市朝阳区”“发货地：北京”“收件人姓北”全捞出来，反而干扰判断。应明确指定要查哪些 td，比如只查第 2 列（客户名）和第 4 列（城市）。
- 用
tr.querySelectorAll('td:nth-child(2), td:nth-child(4)')精确选取目标单元格 - 每个
td用textContent.trim()取纯文本，避免换行、空格、HTML 标签干扰 - 大小写不敏感搜索：用
cellText.toLowerCase().includes(keyword.toLowerCase()) - 若需支持正则或高亮，再扩展；普通查询用
includes()足够，性能好、兼容性稳
IE11 或旧版 Safari 下 textContent 返回空怎么办？
极少数老环境（如 IE11 对某些动态插入的 td）中，textContent 可能返回空字符串，但 innerText 或 innerHTML.replace(/]*>/g, '') 又有兼容或安全风险。
- 稳妥做法是 fallback：先试
textContent，为空则用innerText（IE 支持好） - 一行写法：
const text = td.textContent || td.innerText || '' - 避免用
innerHTML直接去标签——可能误删实体字符如 - 如果表格由框架渲染（如 Vue/React），确保数据已同步到 DOM 再执行搜索，否则读到的是旧内容
scrollTop。用户在滚动到底部搜了个关键词，结果匹配行在顶部，但页面还停在底部，看起来像“没搜到”。加一句 table.closest('div')?.scrollTo({ top: 0 })（如果有外层容器）或直接 window.scrollTo(0, 0) 就能解决。 
