搜索框无响应需先确认事件绑定正确：必须用addEventListener('input')而非onkeyup，并确保DOM加载完成、目标元素存在；搜索应遍历所有td而非仅首列；匹配前需trim和toLowerCase；输入卡顿需加防抖；大量数据应改用数据驱动模式；隐藏行推荐重建tbody而非设display:none。
搜索框没反应？先确认是否绑对了事件
最常见的情况是写了 <input type="search"> 却没监听输入变化。用 onkeyup 会漏掉粘贴、自动填充、语音输入等操作，必须用 addEventListener('input', handler) —— 它捕获所有文本变更，包括剪贴板粘贴和 IME 输入。
还要注意：如果搜索框在表格外（比如顶部独立 <div>），得确保它能拿到目标表格元素；如果表格动态生成，绑定事件前要确认 document.getElementById("myTable") 不返回 null。
- 检查控制台是否有
Cannot read property 'getElementsByTagName' of null错误 - 避免把事件绑在
window.onload里却忘了 DOM 已加载完毕，推荐用DOMContentLoaded或直接放在</body>前 - 输入为空时，应重置所有
tr.style.display，否则上次筛选残留的none会让表格变空
只搜第一列？那是代码写死了 td[0]
很多示例代码写 tr.getElementsByTagName("td")[0]，本质是硬取每行第一个单元格。用户搜 “Germany”，但国家列在第 3 列，自然搜不到。
正确做法是遍历该行所有 td，逐个比对内容。用 tr.querySelectorAll("td") 拿到 NodeList，再转成数组调用 .some()：
立即学习“前端免费学习笔记（深入）”；
const cells = Array.from(tr.querySelectorAll("td"));
const matches = cells.some(cell =>
cell.textContent.toLowerCase().includes(keyword)
);
- 跳过
thead和无td的行（如分组标题行），否则cells.length === 0会导致.some()报错 - 别用
innerText—— 它受 CSS 隐藏影响，可能返回空字符串；一律用textContent - 匹配前务必
keyword.trim().toLowerCase()，否则开头空格或大小写不一致就失效
输入卡顿？不是数据多，是没做防抖
用户敲 “react” 6 个字母，触发 6 次全量遍历 + DOM 操作，500 行以上就会明显卡顿。这不是浏览器慢，是你让 JS 每次都干重活。
加一个简单防抖就行，延迟 200ms 执行过滤（用户停顿才响应）：
let filterTimer;
input.addEventListener('input', () => {
clearTimeout(filterTimer);
filterTimer = setTimeout(() => filterRows(), 200);
});
- 别用
setTimeout但不存引用——那样防抖就失效了 - 数据量超 2000 行时，防抖只是缓解，得换数据驱动模式（如用
Array.filter()处理原始数组，再重绘tbody） - 每次过滤后，记得调用
tr.scrollIntoView({ block: 'nearest' })如果用户聚焦某行，避免隐藏后焦点悬空
筛选后样式错乱？DOM 操作太粗暴
直接设 tr.style.display = 'none' 会破坏表格结构流：隐藏行仍占文档流位置（除非设 display: none），但更常见的是滚动条卡住、固定表头错位、或者 tr:nth-child(odd) 样式全部偏移。
真正干净的做法是只操作 tbody 内容，而不是靠 CSS 隐藏：
- 维护一个
displayData数组，每次筛选后用tbody.innerHTML = rows.map(...).join('')重建 - 若需保留事件绑定或编辑态，用
DocumentFragment批量插入，避免反复重排 - 隐藏行时若用了
display: none，记得同时tr.blur()所有已聚焦的input，否则键盘输入会发往不可见元素
复杂点不在怎么写 filter，而在怎么让筛选不破坏已有交互状态 —— 焦点、编辑、滚动位置、分页参数，这些全得手动兜底。
