实现表格中多列（姓名与国家）的联合模糊搜索功能

本文介绍如何修改原单列搜索脚本，使其支持同时在“name”和“country”两列中进行关键词匹配，提升用户检索体验。核心是遍历每行的两个目标单元格，并使用逻辑或（||）判断任一列包含搜索词即显示该行。

本文介绍如何修改原单列搜索脚本，使其支持同时在“name”和“country”两列中进行关键词匹配，提升用户检索体验。核心是遍历每行的两个目标单元格，并使用逻辑或（||）判断任一列包含搜索词即显示该行。

在默认的 HTML 表格搜索实现中，tr[i].getElementsByTagName(‘td’)[0] 仅获取首列（如 Name），导致搜索范围受限。要扩展为跨多列联合搜索，关键在于：
✅ 同时获取目标列的

元素（例如第 0 列和第 1 列）；
✅ 分别提取其文本内容并转为大写；
✅ 使用 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 优化性能。

通过以上改造，即可在不依赖外部库的前提下，高效实现双列实时联合搜索——简洁、可靠、易于维护。