应避免直接设置 tr.style.display = 'none'，而应添加 hidden-row 类并用 css 控制显隐；筛选前需排除 thead/tfoot、data-no-search 行及纯空行；匹配时遍历 td/th 取 innertext 并标准化空格；大小写、通配符等按需启用，合并单元格需特殊处理。

搜索框输入时实时过滤 tr 行，但别用 display: none 隐藏整行

直接对 tr 设置 style.display = 'none' 看似简单，但会破坏表格结构语义（比如影响 colspan 渲染、屏幕阅读器读取顺序），且后续恢复显示容易漏掉被隐藏的行。更稳妥的做法是给匹配失败的 tr 加一个临时类（如 hidden-row），用 CSS 控制显隐：

.hidden-row { display: none; }

这样逻辑清晰，也方便统一控制样式或做动画。

filter() 之前先排除表头和空行

表格里通常有 thead、tfoot 或带 class="no-search" 的辅助行（比如分页行、合计行），这些不该参与搜索。实际筛选前要明确跳过它们：

• 用 tbody.querySelectorAll('tr') 只取主体行，避开 thead/tfoot
• 对每个 tr 检查 tr.hasAttribute('data-no-search') 或 tr.classList.contains('ignore-search')
• 跳过内容全为空格或纯   的行，避免误匹配

否则用户输个空格，所有“空白”行都消失，体验突兀。

文本匹配别只看 textContent，要处理换行和多余空格

tr.textContent 会把单元格间换行、缩进、多个空格全变成单个空格，导致搜索“订单号 123”匹配不到实际含换行的单元格。正确做法是遍历每个 td 和 th，用 cell.innerText（保留换行但忽略样式）或 cell.textContent.trim().replace(/\s+/g, ' ') 标准化后再拼接。示例：

Comprehensive Three.js 3D graphics reference

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

下载

const cellText = Array.from(tr.querySelectorAll('td, th'))<br>  .map(cell => cell.innerText.trim())<br>  .join(' ');

这样既保持可读性，又避免因 HTML 结构差异导致漏匹配。

大小写和特殊字符处理要按需开启，别默认忽略

是否忽略大小写、是否支持正则、是否允许模糊匹配，得由业务决定。比如后台返回的 ID 全是大写，前端搜“abc”却想匹配“ABC”，那就得用 toLowerCase()；但搜人名“Li”时若忽略大小写，可能误中“Liu”。建议：

• 默认区分大小写，加 checkbox 让用户切换
• 搜索词含 * 或 ? 时自动启用简易通配符（非完整正则，避免 RegExp 注入风险）
• 中文搜索一般不需要忽略大小写，但要防全角/半角空格混用，可用 str.replace(/[\u3000\s]+/g, ' ') 统一

没想清楚就默认 toLowerCase()，后期改逻辑成本很高。

最麻烦的其实是合并单元格（rowspan/colspan）——它的 textContent 会被重复计入多行，导致同一数据在不同行反复出现。真遇到这种表，得单独解析 table 结构生成逻辑行映射，不是简单遍历 tr 能解决的。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！