本教程旨在指导您如何通过JavaScript增强HTML表格的筛选功能，使其支持跨多个列进行搜索。我们将详细介绍如何修改现有的单列筛选脚本，通过引入内部循环遍历每行中的所有单元格，并利用一个状态标志来决定行的显示与隐藏，从而实现高效且灵活的多列数据过滤，提升用户交互体验。
在现代Web应用中，为HTML表格添加交互式搜索或筛选功能是提升用户体验的关键一环。传统的客户端JavaScript筛选方法通常仅支持对表格的单个指定列进行搜索。然而，在实际应用场景中，用户往往需要根据输入的关键词在表格的任意或多个列中进行匹配。本文将深入探讨如何优化和扩展基础的JavaScript筛选逻辑，以实现对HTML表格数据的多列过滤。
理解基础的单列筛选逻辑
在深入多列筛选之前，我们先回顾一下常见的单列筛选JavaScript实现。这种方法的核心思路是获取用户输入的关键词，然后遍历表格的每一行。对于每一行，它只检查特定索引（例如，第一列的索引为0，第二列为1）的单元格（<td>）内容是否包含该关键词。
以下是一个典型的单列筛选函数示例：
立即学习“Java免费学习笔记（深入）”；
function myFunction() {
// 声明所需变量
var input, filter, table, tr, td, i, txtValue;
// 获取搜索输入框和其值
input = document.getElementById("myInput");
filter = input.value.toUpperCase(); // 将搜索关键词转为大写，以便进行不区分大小写的匹配
// 获取表格主体元素和所有数据行
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// 遍历表格中的每一行
for (i = 0; i < tr.length; i++) {
// 关键点：只获取当前行的第一个单元格（索引为0）
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText; // 获取单元格的可见文本内容
// 如果单元格文本包含搜索关键词
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = ""; // 匹配成功，显示该行
} else {
tr[i].style.display = "none"; // 匹配失败，隐藏该行
}
}
}
}在这个基础函数中，td = tr[i].getElementsByTagName("td")[0]; 这一行是限制其为单列筛选的关键。通过修改 [0] 中的索引，可以指定不同的列进行筛选，但一次只能筛选一列。
实现高效的多列数据筛选
要将上述单列筛选功能升级为多列筛选，我们需要调整其逻辑，使其能够遍历当前行的所有列。只要行中的任何一个单元格内容匹配到搜索关键词，该行就应该被显示。
为了实现这一目标，我们将引入一个嵌套循环：外层循环遍历表格的每一行，内层循环则遍历当前行的每一个 <td> 元素。同时，我们使用一个布尔型标志变量（例如 isset）来记录当前行是否包含任何匹配项。
以下是修改后的 myFunction 函数，实现了多列筛选功能：
function myFunction() {
// 声明所需变量
var input, filter, table, tr, i, txtValue;
// `isset` 变量用于标记当前行是否包含匹配搜索关键词的单元格
var isset = false;
// 获取搜索输入框及其值，并转换为大写
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
// 获取表格主体元素 (通常是 <tbody>) 和所有数据行
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// 外层循环：遍历表格中的每一行
for (i = 0; i < tr.length; i++) {
// 在处理每一行之前，将 `isset` 重置为 `false`
isset = false;
// 获取当前行的所有单元格 (<td>) 集合
let tds = tr[i].getElementsByTagName("td");
// 内层循环：遍历当前行的每一个单元格
for (let td of tds) {
// 确保单元格元素存在
if (td) {
txtValue = td.textContent || td.innerText; // 获取单元格文本内容
// 如果单元格文本（转换为大写后）包含搜索关键词
if (txtValue.toUpperCase().indexOf(filter) > -1) {
isset = true; // 发现匹配项，将 `isset` 设置为 `true`
break; // 找到匹配项后，无需再检查当前行的其他单元格，立即跳出内层循环
}
}
}
// 根据 `isset` 变量的值决定当前行的显示或隐藏状态
// 这个判断必须在内层循环结束后进行，以确保检查了所有列
if (isset) {
tr[i].style.display = ""; // 如果有匹配项，则显示该行
} else {
tr[i].style.display = "none"; // 如果没有匹配项，则隐藏该行
}
}
}代码优化与解析：
- var isset = false;: 引入一个布尔变量 isset。在外层循环开始时，对于每一行，它都会被重置为 false。
- let tds = tr[i].getElementsByTagName("td");: 不再通过固定索引获取单个 <td>，而是获取当前行 tr[i] 下的所有 <td> 元素集合。
- for (let td of tds): 引入一个内层循环，遍历 tds 集合中的每一个 <td> 元素。
- if (txtValue.toUpperCase().indexOf(filter) > -1): 在内层循环中，对每个 <td> 元素的文本内容执行匹配检查。
- isset = true; break;: 如果在当前行的任何一个 <td> 中找到了匹配项，就将 isset 设置为 true，并立即使用 break 语句跳出内层循环。这样做可以避免不必要的检查，提高效率。
- 行显示/隐藏逻辑: if (isset) { ... } else { ... } 语句被放置在外层循环的末尾，即内层循环结束后。这确保了在决定
