J*aScript实现HTML表格多列搜索过滤功能教程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript实现HTML表格多列搜索过滤功能教程

2025-10-19

浏览次数：次

返回列表

JavaScript实现HTML表格多列搜索过滤功能教程

本教程详细介绍了如何利用j*ascript增强html表格的搜索功能。通过修改基础的单列过滤逻辑，我们将实现一个高效的多列文本搜索方案，使用户能够在一个输入框中同时对表格的多个字段（如姓名、国家）进行模糊匹配，从而显著提升数据检索的灵活性和用户体验。

在网页开发中，表格是展示结构化数据的重要方式，而为表格添加搜索过滤功能则是提升用户体验的关键一环。当数据量较大时，用户往往需要根据多个条件进行筛选。本文将指导您如何使用纯J*aScript实现一个支持多列搜索的HTML表格过滤功能，允许用户在一个搜索框中同时匹配表格中的不同列数据。

HTML结构准备

首先，我们需要一个包含输入框和数据表格的基础HTML结构。搜索输入框将用于接收用户的查询文本，而表格则包含需要被过滤的数据。

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索姓名或国家...">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">姓名</th>
    <th style="width:40%;">国家</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>德国</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>瑞典</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>英国</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>德国</td>
  </tr>
</table>

在这个结构中：

AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

87 查看详情 AI Surge Cloud

id="myInput"：搜索输入框的唯一标识符。
onkeyup="myFunction()"：当用户在输入框中松开按键时，会触发myFunction函数。
placeholder：提示用户搜索的内容。
id="myTable"：数据表格的唯一标识符。
表格包含一个表头 () 和多行数据 ( ，每行包含两个单元格：姓名和国家）。
J*aScript多列搜索逻辑实现

接下来，我们将编写myFunction函数来处理搜索逻辑。核心思想是遍历表格的每一行，获取指定列（例如第一列和第二列）的文本内容，然后判断这些内容是否包含用户的搜索关键词。如果包含，则显示该行；否则，隐藏该行。
```
<script>
function myFunction() {
  // 声明变量
  var input, filter, table, tr, td, td1, i, txtValue, txtValue1;

  // 获取搜索输入框及其值
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase(); // 将搜索关键词转换为大写，实现不区分大小写的搜索

  // 获取表格及其所有行
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // 遍历所有表格行（跳过表头行，如果表头行有class="header"可以从1开始）
  // 注意：此处假设第一行是表头，所以从索引1开始遍历数据行
  for (i = 0; i < tr.length; i++) {
    // 获取当前行的第一个和第二个<td>元素
    td = tr[i].getElementsByTagName("td")[0]; // 第一列 (姓名)
    td1 = tr[i].getElementsByTagName("td")[1]; // 第二列 (国家)

    // 确保当前行至少有第一个<td>元素
    if (td) {
      // 获取第一个<td>的文本内容
      txtValue = td.textContent || td.innerText;
      // 获取第二个<td>的文本内容
      // 注意：如果td1可能不存在，此处应添加td1的检查，见“注意事项”
      txtValue1 = td1 ? (td1.textContent || td1.innerText) : ""; 

      // 判断任一列的文本内容是否包含搜索关键词
      if (txtValue.toUpperCase().indexOf(filter) > -1 || txtValue1.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = ""; // 显示匹配的行
      } else {
        tr[i].style.display = "none"; // 隐藏不匹配的行
      }
    }
  }
}
</script>
```
代码解析
1. 变量声明: input, filter, table, tr, td, td1, i, txtValue, txtValue1 等变量用于存储DOM元素、搜索关键词、循环索引和单元格文本。
2. 获取搜索关键词:
  - input = document.getElementById("myInput"); 获取输入框元素。
  - filter = input.value.toUpperCase(); 获取用户输入的文本，并将其转换为大写，以便进行不区分大小写的匹配。
3. 获取表格行:
  - table = document.getElementById("myTable"); 获取表格元素。
  - tr = table.getElementsByTagName("tr"); 获取表格中所有的元素（包括表头）。
  - 遍历表格行:
    - for (i = 0; i
    - 重要提示: 如果您的表头行有特定的类名（如class="header"），并且不希望它被过滤，您可以将循环起始索引设置为 i = 1 来跳过它。
  - 获取单元格内容:
    - td = tr[i].getElementsByTagName("td")[0]; 获取当前行的第一个元素。
    - td1 = tr[i].getElementsByTagName("td")[1]; 获取当前行的第二个元素。
    - 文本提取与条件判断:
      - if (td): 确保当前行存在至少一个元素，防止因空行或格式错误导致脚本中断。
      - txtValue = td.textContent || td.innerText;: 提取元素的文本内容。textContent是标准属性，innerText是旧版IE兼容属性。
      - txtValue1 = td1 ? (td1.textContent || td1.innerText) : "";: 同样提取第二个的文本。这里添加了一个三元运算符 td1 ? ... : "" 来确保在 td1 不存在时不会尝试访问其属性，从而避免潜在的运行时错误。
      - if (txtValue.toUpperCase().indexOf(filter) > -1 || txtValue1.toUpperCase().indexOf(filter) > -1): 这是实现多列搜索的核心。它检查第一个单元格的文本（转换为大写）是否包含搜索关键词，或者第二个单元格的文本（转换为大写）是否包含搜索关键词。只要任一条件满足，该行就应该显示。
      - tr[i].style.display = "";: 如果匹配成功，设置行的display样式为空字符串，使其显示。
      - tr[i].style.display = "none";: 如果不匹配，设置行的display样式为none，使其隐藏。