本文详解如何扩展原生 javascript 表格搜索功能，使其同时匹配“name”和“country”两列内容，无需依赖第三方库，仅需修改少量代码即可支持多字段模糊检索。
本文详解如何扩展原生 javascript 表格搜索功能，使其同时匹配“name”和“country”两列内容，无需依赖第三方库，仅需修改少量代码即可支持多字段模糊检索。
在实际开发中，用户常需对表格中的多个关键字段（如姓名、地区、类别等）进行统一搜索。原始示例仅针对第一列（td[0]）进行匹配，导致 Country 列的关键词无法被检索到。要实现真正的“跨列搜索”，核心在于：
遍历每一行时，分别提取并检查所有目标列的文本内容，只要任一列匹配即显示该行
。
以下是优化后的完整解决方案：
✅
关键改进说明：
使用 cells[0] 和 cells[1] 分别获取 Name 与 Country 单元格，避免硬编码 td1 变量；
引入 .trim() 防止空格输入干扰匹配逻辑；
使用现代语法 String.prototype.includes() 替代 indexOf() > -1，语义更清晰；
显式跳过表头行（i = 1），提升健壮性；
添加 cells.length < 2 安全检查，防止 DOM 结构异常导致脚本报错。
⚠️
注意事项：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
此方案区分大小写（通过 toUpperCase() 统一转换），如需忽略重音或特殊字符，可进一步集成 Intl.Collator 或正则预处理；
若表格含大量数据（>500 行），建议添加防抖（debounce）机制，避免高频 onkeyup 触发性能问题；
如需支持更多列（如 City、Category），只需扩展 cells[n] 判断逻辑，或改用 Array.from(cells).some(...) 实现动态列匹配。
通过以上改造，搜索框即可真正实现“全局字段覆盖”，显著提升用户体验与交互灵活性。
Name
Country
Alfreds Futterkiste
Germany
Berglunds snabbkop
Sweden
Island Trading
UK
Koniglich Essen
Germany