HTML表格多列搜索实现：JavaScript增强筛选功能教程-js教程-PHP中文网

HTML表格多列搜索实现：JavaScript增强筛选功能教程

花韻仙語

发布： 2025-10-19 12:54:11

原创

981人浏览过

html表格多列搜索实现：javascript增强筛选功能教程

本教程将详细指导如何通过修改JavaScript函数，为HTML表格实现多列搜索功能。我们将以“姓名”和“国家”两列为例，展示如何同时筛选多个数据列，从而提升用户在大型数据表格中查找信息的效率和体验。

在网页开发中，表格数据展示非常常见，而为表格添加搜索功能则是提升用户体验的关键。默认的单列搜索功能往往无法满足用户在多维度数据中查找信息的需求。例如，用户可能希望同时在“姓名”和“国家”列中搜索某个关键词。本教程将介绍如何通过简单的JavaScript代码修改，实现HTML表格的跨多列搜索功能，让用户能够更灵活地筛选数据。

理解原始单列搜索机制

首先，我们来看一个典型的单列搜索实现。它通常通过监听输入框的keyup事件来触发搜索，并遍历表格的每一行，只检查特定列（例如第一列）的内容是否包含搜索关键词。

<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>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>

<script>
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";
      }
    }
  }
}
</script>

登录后复制

上述代码中，关键在于 td = tr[i].getElementsByTagName("td")[0]; 这一行，它明确指定了只获取当前行（tr[i]）的第一个 <td> 元素（索引为 0），因此搜索范围被限制在“姓名”列。

立即学习“Java免费学习笔记（深入）”；

What-the-Diff

检查请求差异，自动生成更改描述

103

查看详情

实现多列搜索功能

要实现多列搜索，我们需要修改 myFunction，使其能够同时获取并检查多个列的内容。核心思路是：

获取所有需要参与搜索的列的 <td> 元素。
提取这些 <td> 元素的文本内容。
使用逻辑或（||）运算符，判断搜索关键词是否在任一列中出现。

以下是修改后的JavaScript代码，用于同时搜索“姓名”（第一列，索引0）和“国家”（第二列，索引1）：

<script>
function myFunction() {
  // 声明新增变量 td1, txtValue1 用于处理第二列
  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"); // 获取表格中所有的行

  // 遍历所有表格行
  for (i = 0; i < tr.length; i++) {
    // 跳过表头行，避免将其作为数据行处理
    if (tr[i].classList.contains('header')) {
        continue;
    }

    // 获取当前行的第一列 (姓名)
    td = tr[i].getElementsByTagName("td")[0];
    // 获取当前行的第二列 (国家)
    td1 = tr[i].getElementsByTagName("td")[1];

    // 确保这两列都存在，避免因列不存在而引发错误
    if (td && td1) {
      txtValue =  td.textContent || td.innerText;     // 获取姓名列的文本内容
      txtValue1 =  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"; // 隐藏不匹配的行
      }
    } else {
        // 如果某行没有足够的列（例如只有一列），则默认隐藏该行
        tr[i].style.display = "none";
    }
  }
}
</script>

登录后复制

完整示例代码

将修改后的JavaScript代码与HTML结构结合，即可实现一个完整的、支持多列搜索的HTML表格。

<!DOCTYPE html>
<html>
<head>
<title>HTML表格多列搜索示例</title>
<meta charset="UTF-8">
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }
  #myInput {
    width: 300px;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
  }
  #myTable {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
  }
  #myTable th, #myTable td {
    text-align: left;
    padding: 12px;
    border: 1px solid #ddd;
  }
  #myTable tr.header {
    background-color: #f2f2f2;
    font-weight: bold;
  }
  #myTable tr:hover:not(.header) {
    background-color: #f5f5f5;
  }
</style>
</head>
<body>

<h2>表格多列搜索演示</h2>
<p>在下方输入框中输入关键词，即可同时搜索“姓名”和“国家”两列。</p>

<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>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>

登录后复制

以上就是HTML表格多列搜索实现：JavaScript增强筛选功能教程的详细内容，更多请关注php中文网其它相关文章！