本教程详细介绍了如何使用javascript实现html表格的多列数据过滤功能。针对w3schools基础教程仅支持单列过滤的限制，文章通过修改javascript逻辑，引入嵌套循环遍历每行所有单元格，判断搜索关键词是否匹配任意列数据，从而实现更灵活、强大的多列模糊搜索，显著提升用户在大型数据表格中的查找效率。
JavaScript实现HTML表格多列数据过滤教程
在Web开发中，为HTML表格添加搜索或过滤功能是提升用户体验的常见需求。用户可能希望根据输入的关键词，在表格的多个列中查找匹配项，并动态显示或隐藏相应的行。本教程将基于常见的JavaScript表格过滤示例，详细讲解如何将其扩展为支持多列数据过滤。
基础单列过滤机制回顾
许多开发者在实现表格过滤时，会参考W3Schools等提供的基础JavaScript示例。该方法的核心思想是获取用户输入，然后遍历表格的每一行，检查指定列（例如第一列）的内容是否包含搜索关键词。
以下是典型的单列过滤JavaScript代码示例：
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++) {
// 默认只获取每行的第一个单元格（td[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）进行过滤。如果需要过滤其他列，只需更改索引值即可。然而，这种方法无法同时在多个列中进行搜索。
立即学习“Java免费学习笔记（深入）”；
实现多列数据过滤
要实现多列数据过滤，我们需要修改核心逻辑：不再局限于检查单个单元格，而是遍历当前行的所有单元格。只要行中的任何一个单元格包含搜索关键词，该行就应该被显示。
核心思路如下：
- 遍历所有行：保持外层循环不变。
- 遍历当前行的所有单元格：在每行内部，添加一个内层循环来遍历该行的所有<td>元素。
- 标记匹配状态：引入一个布尔变量（例如foundMatchInRow），在内层循环中，一旦找到任何一个单元格匹配关键词，就将其设置为true。
- 决定行显示状态：内层循环结束后，根据foundMatchInRow的值来决定显示或隐藏整行。
- 重置标记：在外层循环的每次迭代开始时，重置foundMatchInRow为false，以确保每行的判断是独立的。
以下是实现多列过滤的JavaScript代码：
function myFunction() {
var input, filter, table, tr, i, txtValue;
var foundMatchInRow = false; // 用于标记当前行是否找到匹配项
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
// 获取 tbody 中的所有数据行，避免处理 thead 中的行
var tbody = table.querySelector('tbody');
if (!tbody) { // 如果没有 tbody，则直接获取 table 下的所有 tr，但需注意表头处理
tr = table.getElementsByTagName("tr");
} else {
tr = tbody.getElementsByTagName("tr");
}
// 遍历所有表格数据行
for (i = 0; i < tr.length; i++) {
// 获取当前行的所有单元格（td）
let tds = tr[i].getElementsByTagName("td");
foundMatchInRow = false; // 重置每行的匹配状态
// 遍历当前行的所有单元格
for (let j = 0; j < tds.length; j++) { // 可以使用 for...of (for (let td of tds))
let td = tds[j];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
foundMatchInRow = true; // 只要有一个单元格匹配，就标记为true
break; // 找到匹配项后，即可跳出内层循环，无需检查该行其他单元格
}
}
}
// 根据是否找到匹配项来决定显示或隐藏整行
if (foundMatchInRow) {
tr[i].style.display = ""; // 显示该行
} else {
tr[i].style.display = "none"; // 隐藏该行
}
}
}完整示例代码
为了演示上述多列过滤功能，我们需要一个包含输入框和表格的HTML结构。请注意，id="myTable"应该应用于包含实际数据行的<tbody>元素或整个<table>元素。为了更健壮，我们建议
