使用jQuery实现带分组表头的表格数据动态过滤-html教程-PHP中文网

使用jQuery实现带分组表头的表格数据动态过滤

聖光之護

发布： 2025-11-28 11:33:06

原创

714人浏览过

使用jQuery实现带分组表头的表格数据动态过滤

本文将指导您如何利用jquery实现一个高效的表格数据动态过滤功能，尤其适用于包含多个独立分组表头（``）的复杂表格。通过引入`data-group`属性关联表头和表体，我们能够智能地根据搜索内容，精确地显示或隐藏相应的表头及其关联的行，从而优化用户体验和数据呈现。

问题概述

在网页开发中，动态过滤表格数据是一项常见需求。当表格包含多个独立的表头（）和表体（

）组时，例如一个大型表格被逻辑上划分为多个部门或类别，简单的行过滤逻辑将无法满足需求。用户期望的是，当搜索内容匹配到某个表体行时，其对应的表头也应显示；如果表头本身的内容匹配搜索词，该表头及其关联的行也应显示。传统的jQuery过滤方法往往只针对表格行（），导致即使所有行都被过滤掉，表头仍然全部显示，造成信息展示的混乱。

原始实现及局限

一个基本的jQuery表格过滤功能通常会监听输入框的keyup事件，然后遍历所有表格行，根据行内容与搜索词的匹配情况来切换行的可见性。

原始HTML结构示例

以下是一个包含多个和

的表格结构示例，但它们之间没有明确的逻辑关联：

<div class="col-md d-inline">
  <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Meklēt.." id="myInput">
</div>
<table id="myTable" class="table table-sm table-bordered table-hover">
  <thead class="bg-primary">
    <tr>
      <th colspan="3">Information about department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name - It</td>
      <td>Phone - 1111111</td>
      <td>E-mail - <a class="__cf_email__" data-cfemail="d7bab6bebb97bab6bebbf9b4b8ba" href="/cdn-cgi/l/email-protection">[email protected]</a></td>
    </tr>
  </tbody>
  <thead class="bg-primary">
    <tr>
      <th colspan="3">Information about department 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Name - Finance</td>
      <td>Phone - 1111112</td>
      <td>E-mail - <a class="__cf_email__" data-cfemail="88eee1e6e9e6ebedc8e5e9e1e4a6ebe7e5" href="/cdn-cgi/l/email-protection">[email protected]</a></td>
    </tr>
<tr>
      <td>Name - Finance2</td>
      <td>Phone - 1111113</td>
      <td>E-mail - <a class="__cf_email__" data-cfemail="197f707778777a7c2b5974787075377a7674" href="/cdn-cgi/l/email-protection">[email protected]</a></td>
    </tr>
  </tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

登录后复制

原始JavaScript过滤代码

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tbody tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

登录后复制

局限性分析

上述代码的局限性在于：

它只对#myTable tbody tr元素进行过滤和显示/隐藏操作。

元素完全不受影响，无论其关联的中是否有匹配的行，所有的都会一直显示。这导致用户在搜索时，可能会看到一堆不包含任何相关内容的表头，降低了用户体验。

解决方案：利用数据分组属性

为了解决上述问题，我们需要一种机制来逻辑地关联每个及其对应的

。HTML5的data-*自定义属性是实现这一目标的理想选择。我们可以为每个相关的和分配一个相同的data-group属性值。

优化后的HTML结构

通过为每个和其关联的

通用产品企业网站(.NET2.0)1.0

1、系统采用.net2.0开发，数据库access2、三层架构，数据层、逻辑层和表示层分离3、系统完全使用div＋css布局，可以灵活处理界面4、技术特点: 使用模板页，大大减少代码量动态生成竖向导航菜单 ul li实现表格各种自定义用户空间 Reapter等数据控件的灵活运用

查看详情

添加一个唯一的data-group属性，我们建立了一个逻辑上的分组关系。

<div class="col-md d-inline">
  <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Meklēt.." id="myInput">
</div>
<table id="myTable" class="table table-sm table-bordered table-hover">
  <thead class="bg-primary" data-group="1">
    <tr>
      <th colspan="3">Information about department</th>
    </tr>
  </thead>
  <tbody data-group="1">
    <tr>
      <td>Name - It</td>
      <td>Phone - 1111111</td>
      <td>E-mail - <a class="__cf_email__" data-cfemail="87eae6eeebc7eae6eeeba9e4e8ea" href="/cdn-cgi/l/email-protection">[email protected]</a></td>
    </tr>
  </tbody>
  <thead class="bg-primary" data-group="2">
    <tr>
      <th colspan="3">Information about department 2</th>
    </tr>
  </thead>
  <tbody data-group="2">
    <tr>
      <td>Name - Finance</td>
      <td>Phone - 1111112</td>
      <td>E-mail - <a class="__cf_email__" data-cfemail="4a2c23242b24292f0a272b232664292527" href="/cdn-cgi/l/email-protection">[email protected]</a></td>
    </tr>
    <tr>
      <td>Name - Finance2</td>
      <td>Phone - 1111113</td>
      <td>E-mail - <a class="__cf_email__" data-cfemail="791f101718171a1c4b3914181015571a1614" href="/cdn-cgi/l/email-protection">[email protected]</a></td>
    </tr>
  </tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

登录后复制

在上述结构中，data-group="1"将第一个与第一个

关联起来，data-group="2"则关联了第二个和，以此类推。

JavaScript实现详解

有了分组属性后，我们的JavaScript逻辑将进行以下调整：

监听输入框事件：与之前相同，当用户在搜索框输入时触发。
遍历每个：而不是直接遍历，我们现在遍历每个元素。
获取分组ID：对于每个，获取其data-group属性值。
检查自身匹配：判断当前的文本内容是否包含搜索词。
查找关联的行：根据data-group值，找到所有属于该分组的中的元素。
遍历并检查行匹配：遍历这些元素，判断它们的内容是否包含搜索词，并根据匹配结果切换行的可见性。同时，记录该分组内是否有任何行匹配成功。

切换和可见性：如果自身匹配成功，或者其关联的中有任何行匹配成功，则显示该及其对应的整个；否则，隐藏它们。
$(document).ready(function() { $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase().trim(); // 获取搜索值并转换为小写，去除首尾空格 $("#myTable thead").each(function() { // 遍历表格中的每个 thead 元素 var group = $(this).data("group"); // 获取当前 thead 的 data-group 属性值 var isTheadMatched = $(this).text().toLowerCase().indexOf(value) > -1; // 检查 thead 自身内容是否匹配搜索词 // 构建选择器，用于查找当前分组对应的 tbody 中的所有 tr 元素 var selector = `tbody[data-group='${group}'] tr`; var allRows = $('#myTable').find(selector); var isAnyRowMatched = false; // 标志位，用于记录当前分组是否有任何 tr 匹配成功 // 遍历当前分组中的所有 tr 元素 for (var row of $(allRows)) { const isRowContentMatched = $(row).text().toLowerCase().indexOf(value) > -1; // 检查行内容是否匹配搜索词 $(row).toggle(isRowContentMatched); // 根据行内容匹配结果切换行的可见性 if (isRowContentMatched) { isAnyRowMatched = true; // 如果有行匹配成功，则设置标志位为 true } } // 切换当前 thead 的可见性：如果 thead 自身匹配成功，或者其关联的任何行匹配成功，则显示 thead $(this).toggle(isTheadMatched || isAnyRowMatched); // 切换当前 tbody 的可见性：与 thead 的逻辑保持一致，确保整个分组的显示/隐藏是同步的 $(`tbody[data-group='${group}']`).toggle(isTheadMatched || isAnyRowMatched); }); }); });
登录后复制
通过这种方式，我们确保了表头与表体内容之间的逻辑关联，实现了更加智能和用户友好的表格过滤功能。

注意事项

性能优化：对于包含成千上万条记录的超大型表格，纯客户端的DOM操作可能会导致性能瓶颈。在这种情况下，可以考虑以下策略：

虚拟滚动 (Virtual Scrolling)：只渲染视口内可见的行。

服务器端过滤：将搜索请求发送到后端，由服务器返回过滤后的数据。

防抖 (Debounce)：限制keyup事件的触发频率，例如在用户停止输入500毫秒后