应使用 input 事件监听搜索框，配合防抖；显式声明 tbody 并用 querySelectorAll('tbody tr') 遍历；逐 td 取 contentText 比对；过滤后同步更新导出数据源与分页状态，并动态插入无结果提示。

用 input 事件监听，别用 keyup 或 change

用户粘贴、语音输入、自动填充时，keyup 根本不触发，change 要等失焦才执行——搜索框会“假死”或延迟响应。必须绑定 input 事件：

• searchInput.addEventListener('input', filterRows) 是唯一可靠方式
• 加防抖（200ms 延迟）可避免每敲一个字就重刷 DOM，尤其行数 > 200 时明显卡顿
• IE11 不支持 input？fallback 到 propertychange，但只在必要时启用

遍历 tbody tr，别用 getElementsByTagName('tr')

浏览器可能把 thead、tfoot 甚至注释节点都算进 tr 集合里，导致报错或漏匹配。显式声明 并精准选取：

• HTML 中必须写明 ，不能依赖浏览器自动补全
• JS 里用 table.querySelectorAll('tbody tr')，不是 table.getElementsByTagName('tr')
• 遍历时跳过 row.cells.length === 0 的行（比如空行或纯表头），防止 row.cells[0] 报 undefined

逐 td 比对，别拼整行文本再 includes()

把整行 textContent 拼起来再搜，中文、数字、空格混在一起，既慢又不准——比如搜“前端”可能命中“前端工程师”和“后端”，但也会误匹配“钱端”这种不存在的词。


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
• 对每个 td 单独取 c.textContent?.trim() || ''，再转小写比对
• 只要任意一列匹配，就显示该行；全都不匹配才隐藏
• 数值字段要先转字符串：String(row[field]).toLowerCase().includes(keyword)，否则 123.includes("2") 直接报错

过滤后同步更新导出源和分页状态

最常被忽略的不是搜索逻辑本身，而是“视图”和“数据源”的脱节：用户搜完“张三”，点导出却导出全部原始数据；翻到第 3 页，筛选后页码还停在 3，但实际只剩 5 条结果。

• 过滤后必须重置 currentPage = 1，并重新计算总页数
• 导出按钮的数据源不能硬绑原始数组，得指向当前筛选后的数组副本
• 无结果时插入 未找到“张三”，colspan 值需动态读取 thead th 数量，别写死

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