搜索框应置于table外部而非内部，优先用textcontent而非innertext匹配文本，结合防抖与文本缓存优化性能，聚焦时调用scrollintoview避免键盘遮挡，并明确客户端搜索非万能方案。
搜索框放哪？别塞进 <table> 里
<p>直接把 <code><input type="search"> 塞进 <table> 标签内部（比如放在 <code><thead> 里或第一行 <code><tr> 中）是常见误区。HTML 规范不禁止，但语义混乱、样式难控，且搜索框和表格数据逻辑上是分离的——它属于“控制层”，不是“数据层”。应该放在 <code><table> 外部，紧邻上方或右侧更合理。
<h3>用 JavaScript 实现过滤时，<code>textContent 比 innerText 更可靠
遍历表格行做关键词匹配时，优先读取每行的 textContent，而不是 innerText。前者返回所有文本节点内容（包括隐藏元素里的文字），后者受 CSS display: none 或 visibility: hidden 影响，可能漏掉本该参与搜索的内容。另外注意大小写：默认区分大小写，建议统一转小写比对。
常见做法示例：
const searchTerm = input.value.toLowerCase();
Array.from(table.querySelectorAll('tbody tr')).forEach(row => {
const text = row.textContent.toLowerCase();
row.style.display = text.includes(searchTerm) ? '' : 'none';
});
搜索性能差？避开在每次按键都重刷整个表格
用户每按一次键就遍历全部 <tr> 并设置 <code>style.display，在几百行表格中会明显卡顿。两个实用缓解点：
- 用
input事件配合防抖（debounce），比如延迟 200ms 再执行过滤 - 避免反复读取 DOM 状态；可预先提取每行的纯文本缓存到数组，搜索时只查数组
- 如果表格由框架（如 React/Vue）渲染，不要手动操作
style.display，改用状态控制显隐
移动端输入法弹出后遮挡表格？加个 scrollIntoView
在 iOS Safari 或部分安卓浏览器中，聚焦搜索框后软键盘弹出，可能把表格顶出可视区，用户看不到搜索结果。简单补救是在 input 聚焦后调用：
searchInput.addEventListener('focus', () => {
table.scrollIntoView({ block: 'nearest' });
});
注意别用 { block: 'top' }，否则表格会强行滚到顶部，反而打断用户浏览上下文。
真正麻烦的是混合了分页、虚拟滚动或服务端搜索的场景——这时候前端过滤只是临时方案，得看后端是否支持带 q=xxx 的 API 查询。别把客户端搜索当银弹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
