本文介绍如何修改原单列搜索脚本，使其支持同时在“name”和“country”两列中进行关键词匹配，提升用户检索体验。核心是遍历每行的两个目标单元格，并使用逻辑或（||）判断任一列包含搜索词即显示该行。
本文介绍如何修改原单列搜索脚本，使其支持同时在“name”和“country”两列中进行关键词匹配，提升用户检索体验。核心是遍历每行的两个目标单元格，并使用逻辑或（||）判断任一列包含搜索词即显示该行。
在默认的 HTML 表格搜索实现中，tr[i].getElementsByTagName('td')[0] 仅获取首列（如 Name），导致搜索范围受限。要扩展为跨多列联合搜索，关键在于：
✅ 同时获取目标列的
✅ 分别提取其文本内容并转为大写；
✅ 使用 indexOf(filter) > -1 检查是否包含搜索关键词；
✅ 任一列匹配即保留该行（tr[i].style.display = ""），否则隐藏（"none"）。
以下是完整、健壮的优化版 JavaScript 实现：
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search across Name & Country...">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>
<script>
function myFunction() {
const input = document.getElementById("myInput");
const filter = input.value.trim().toUpperCase(); // 忽略前后空格，提升鲁棒性
const table = document.getElementById("myTable");
const rows = table.querySelectorAll("tr:not(.header)"); // 排除表头行，更语义化
// 若搜索框为空，显示所有数据行
if (filter === "") {
rows.forEach(row => row.style.display = "");
return;
}
rows.forEach(row => {
const cells = row.querySelectorAll("td");
// 确保该行有至少2个<td>，避免索引越界
if (cells.length < 2) {
row.style.display = "none";
return;
}
const nameText = cells[0].textContent || cells[0].innerText;
const countryText = cells[1].textContent || cells[1].innerText;
const matchesName = nameText.toUpperCase().includes(filter);
const matchesCountry = countryText.toUpperCase().includes(filter);
row.style.display = matchesName || matchesCountry ? "" : "none";
});
}
</script>✅ 关键优化说明：
- 安全取值：使用 querySelectorAll("tr:not(.header)") 明确跳过表头，避免误操作；
- 防越界处理：检查 cells.length
- 空值容错：trim() 清除用户输入空格，|| 备用文本属性兼容旧浏览器；
- 现代语法：采用 forEach 和 includes()（比 indexOf > -1 更可读）；
- 用户体验：输入为空时自动恢复全部显示，符合直觉。
⚠️ 注意事项：
- 该方案适用于静态表格。若表格由框架（如 Vue/React）渲染，请改用响应式数据过滤（如计算属性或 useState + filter()）；
- 如需高亮匹配关键词或支持正则/分词搜索，建议引入专用库（如 Fuse.js）；
- 对超大表格（>1000 行），应添加防抖（debounce）避免高频重绘，可结合 setTimeout 优化性能。
通过以上改造，即可在不依赖外部库的前提下，高效实现双列实时联合搜索——简洁、可靠、易于维护。
