html表格实时搜索必须用javascript动态控制tr显示状态；应使用input事件而非onkeyup以覆盖所有输入方式，绑定推荐addeventlistener，需trim和tolowercase处理输入值，ie11需用indexof替代includes，搜索应遍历所有td而非仅首列，大数据量需节流或转数组操作，隐藏行推荐visibility:collapse避免布局错乱。
HTML 表格本身不能实时搜索，所有“实时搜索”效果都靠 JavaScript 动态控制 tr 的 display 状态；不写 JS，<input> 输再多字，表格也毫无反应。
为什么用 input 事件而不是 onkeyup
用户粘贴、自动填充、语音输入、剪贴板拖入文字时，onkeyup 完全捕获不到——只有 input 事件能覆盖全部输入来源。
- 绑定方式必须是
element.addEventListener('input', handler)，不要写oninput="myFunc()"内联属性（不利于调试和复用） - 记得对输入值做
value.trim().toLowerCase()，否则空格开头/结尾会导致匹配失败 - IE11 不支持
includes()，要用indexOf() > -1回退
怎么让搜索覆盖所有 td 而不只是第一列
常见错误是写 tr[i].getElementsByTagName("td")[0] 或 tr.cells[0]，这只会查首列，输 “Germany” 却搜不到 Country 在第 2 列的行。
- 正确做法：用
tr.querySelectorAll("td")或[...tr.cells]获取整行所有单元格 - 遍历每个
td，取textContent（不是innerText，后者受 CSS 影响） - 用
some()判断是否存在任一列匹配：[...tds].some(td => td.textContent.toLowerCase().includes(filter)) - 跳过表头行：
tr.firstElementChild.tagName === 'TH'或检查tds.length === 0
超过 2000 行就卡？别硬遍历 DOM
每次输入都调用 querySelectorAll + 遍历全部 tr，在低端设备上会明显掉帧。这不是代码写得不对，而是 DOM 操作成本太高。
- 简单节流：用
setTimeout延迟执行，比如 200ms 内只跑最后一次搜索 - 更优解：把原始数据存成数组（如
data = [{name: '张三', age: 25}, ...]），搜索时只操作数组，再用模板重绘tbody - 真要撑万级数据：得上虚拟滚动，只渲染可视区域的
tr，DOM 节点数恒定
最易被忽略的一点：隐藏 tr 后，如果表格有固定高度或用了 overflow-y: auto，display: none 会导致滚动条错位或内容塌陷——此时该用 visibility: collapse（表格专用）或干脆用 classList.toggle() 配合 CSS 控制显隐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
