本教程将详细指导如何通过修改JavaScript函数，为HTML表格实现多列搜索功能。我们将以“姓名”和“国家”两列为例，展示如何同时筛选多个数据列，从而提升用户在大型数据表格中查找信息的效率和体验。
在网页开发中，表格数据展示非常常见，而为表格添加搜索功能则是提升用户体验的关键。默认的单列搜索功能往往无法满足用户在多维度数据中查找信息的需求。例如，用户可能希望同时在“姓名”和“国家”列中搜索某个关键词。本教程将介绍如何通过简单的JavaScript代码修改，实现HTML表格的跨多列搜索功能，让用户能够更灵活地筛选数据。
理解原始单列搜索机制
首先，我们来看一个典型的单列搜索实现。它通常通过监听输入框的keyup事件来触发搜索，并遍历表格的每一行，只检查特定列（例如第一列）的内容是否包含搜索关键词。
| 姓名 | 国家 |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
上述代码中，关键在于 td = tr[i].getElementsByTagName("td")[0]; 这一行，它明确指定了只获取当前行（tr[i]）的第一个
实现多列搜索功能
要实现多列搜索，我们需要修改 myFunction，使其能够同时获取并检查多个列的内容。核心思路是：
- 获取所有需要参与搜索的列的
元素。 - 提取这些
元素的文本内容。 - 使用逻辑或（||）运算符，判断搜索关键词是否在任一列中出现。
以下是修改后的JavaScript代码，用于同时搜索“姓名”（第一列，索引0）和“国家”（第二列，索引1）：
完整示例代码
将修改后的JavaScript代码与HTML结构结合，即可实现一个完整的、支持多列搜索的HTML表格。
HTML表格多列搜索示例 表格多列搜索演示
在下方输入框中输入关键词，即可同时搜索“姓名”和“国家”两列。
姓名 国家 Alfreds Futterkiste Germany Berglunds snabbkop Sweden Island Trading UK - 提取这些
