JavaScript实现HTML表格多列数据过滤教程-php教程-PHP中文网

JavaScript实现HTML表格多列数据过滤教程

聖光之護

发布： 2025-11-10 10:39:22

原创

609人浏览过

JavaScript实现HTML表格多列数据过滤教程

本教程详细介绍了如何使用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免费学习笔记（深入）”；

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

实现多列数据过滤

要实现多列数据过滤，我们需要修改核心逻辑：不再局限于检查单个单元格，而是遍历当前行的所有单元格。只要行中的任何一个单元格包含搜索关键词，该行就应该被显示。

核心思路如下：

遍历所有行：保持外层循环不变。
遍历当前行的所有单元格：在每行内部，添加一个内层循环来遍历该行的所有<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"; // 隐藏该行
    }
  }
}

登录后复制