应使用 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 集合里，导致报错或漏匹配。显式声明 <tbody> 并精准选取：
<ul><li>HTML 中必须写明 <code><tbody>，不能依赖浏览器自动补全
<li>JS 里用 <code>table.querySelectorAll('tbody tr')，不是 table.getElementsByTagName('tr')
row.cells.length === 0 的行（比如空行或纯表头），防止 row.cells[0] 报 undefined
逐 td 比对，别拼整行文本再 includes()
把整行 textContent 拼起来再搜，中文、数字、空格混在一起，既慢又不准——比如搜“前端”可能命中“前端工程师”和“后端”，但也会误匹配“钱端”这种不存在的词。
- 对每个
td单独取c.textContent?.trim() || ''，再转小写比对 - 只要任意一列匹配，就显示该行；全都不匹配才隐藏
- 数值字段要先转字符串：
String(row[field]).toLowerCase().includes(keyword)，否则123.includes("2")直接报错
过滤后同步更新导出源和分页状态
最常被忽略的不是搜索逻辑本身，而是“视图”和“数据源”的脱节：用户搜完“张三”，点导出却导出全部原始数据；翻到第 3 页，筛选后页码还停在 3，但实际只剩 5 条结果。
- 过滤后必须重置
currentPage = 1，并重新计算总页数 - 导出按钮的数据源不能硬绑原始数组，得指向当前筛选后的数组副本
- 无结果时插入
<tr><td colspan="4">未找到“张三”</td></tr>，colspan值需动态读取thead th数量，别写死
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
