最轻量方案是用javascript遍历tr和td配合includes()模糊匹配，需遍历每行所有td而非仅[0]，跳过表头行，用input事件监听并trim过滤值，现代浏览器推荐tolowercase().includes()，ie11需回退indexof()，超2000行时应优化性能。
直接用 JavaScript 遍历 <tr> 和 <code><td>，配合 <code>includes() 做模糊匹配，是最轻量、兼容性最好、也最容易调试的方案。不需要引入框架，不依赖后端，用户一输就响应——但前提是表格行数别超过 2000 行，否则卡顿明显。
为什么 getElementsByTagName("td")[0] 只搜第一列？
很多现成代码里写 td = tr[i].getElementsByTagName("td")[0]，本质是只取每行第一个 <td> 元素，也就是首列。输入 “Germany” 却搜不到 Country 列为 Germany 的行，就是这个原因。
<ul><li>必须遍历整行所有 <code><td>，不能只取 <code>[0]
tr[i].getElementsByTagName("td") 拿到 HTMLCollection，再转数组（比如 [...tds]）才能用 some()
<th> 或无 <code><td> 的 <code><tr>）要跳过，否则 <code>tds.length === 0 会报错
input 事件比 onkeyup 更可靠
用 onkeyup 绑定函数，漏掉粘贴、语音输入、自动填充等场景；而 input 事件监听所有值变更，更健壮。
- 别写
<input onkeyup="searchTable()">，改用 JS 注册：searchInput.addEventListener('input', searchTable) - 注意清除空格和首尾空白：
filter = input.value.trim().toLowerCase() - 空搜索词时，应恢复全部行显示，别留着上一次的隐藏状态
大小写处理和兼容性取舍
includes() 比 indexOf() > -1 更易读，但 IE 不支持；如果项目还要兼容 IE11，得回退。
- 现代写法（推荐）：
txtValue.toLowerCase().includes(filter) - IE 兼容写法：
txtValue.toLowerCase().indexOf(filter) > -1 - 避免用
innerText：Safari 旧版对它支持不稳定，优先用textContent - 数字列搜索没问题——
textContent会把<td>123</td>转成字符串 "123"，照常匹配
真正容易被忽略的不是逻辑，而是性能临界点：当表格动态渲染了 3000+ 行，每次 input 都触发全量 DOM 遍历，UI 就会掉帧。这时候该考虑节流（setTimeout + 标志位）、或把数据抽成数组做纯 JS 过滤再重绘 tbody ——但那是另一个问题了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
