本文详解如何扩展原生 javascript 表格搜索功能，使其同时匹配“name”和“country”两列内容，无需依赖第三方库，仅需修改少量代码即可支持多字段模糊检索。
本文详解如何扩展原生 javascript 表格搜索功能，使其同时匹配“name”和“country”两列内容，无需依赖第三方库，仅需修改少量代码即可支持多字段模糊检索。
在实际开发中，用户常需对表格中的多个关键字段（如姓名、地区、类别等）进行统一搜索。原始示例仅针对第一列（td[0]）进行匹配，导致 Country 列的关键词无法被检索到。要实现真正的“跨列搜索”，核心在于：遍历每一行时，分别提取并检查所有目标列的文本内容，只要任一列匹配即显示该行。
以下是优化后的完整解决方案：
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search across Name and 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.toUpperCase().trim(); const table = document.getElementById("myTable"); const rows = table.getElementsByTagName("tr"); // 跳过表头行（索引为0），只处理数据行 for (let i = 1; i < rows.Length; i++) { const cells = rows[i].getElementsByTagName("td"); // 确保该行至少包含2个单元格（Name 和 Country） if (cells.length < 2) continue; 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); // 满足任一条件即显示，否则隐藏 rows[i].style.display = matchesName || matchesCountry ? "" : "none"; } } </script>✅ 关键改进说明：
- 使用 cells[0] 和 cells[1] 分别获取 Name 与 Country 单元格，避免硬编码 td1 变量；
- 引入 .trim() 防止空格输入干扰匹配逻辑；
- 使用现代语法 String.prototype.includes() 替代 indexOf() > -1，语义更清晰；
- 显式跳过表头行（i = 1），提升健壮性；
- 添加 cells.length
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 此方案区分大小写（通过 toUpperCase() 统一转换），如需忽略重音或特殊字符，可进一步集成 Intl.Collator 或正则预处理；
- 若表格含大量数据（>500 行），建议添加防抖（debounce）机制，避免高频 onkeyup 触发性能问题；
- 如需支持更多列（如 City、Category），只需扩展 cells[n] 判断逻辑，或改用 Array.from(cells).some(…) 实现动态列匹配。
通过以上改造，搜索框即可真正实现“全局字段覆盖”，显著提升用户体验与交互灵活性。