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

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

聖光之護

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

原创

680人浏览过

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

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

问题概述

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

原始实现及局限

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

原始HTML结构示例

以下是一个包含多个<thead>和<tbody>的表格结构示例，但它们之间没有明确的逻辑关联：

<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元素进行过滤和显示/隐藏操作。
<thead>元素完全不受影响，无论其关联的<tbody>中是否有匹配的行，所有的<thead>都会一直显示。这导致用户在搜索时，可能会看到一堆不包含任何相关内容的表头，降低了用户体验。

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

为了解决上述问题，我们需要一种机制来逻辑地关联每个<thead>及其对应的<tbody>。HTML5的data-*自定义属性是实现这一目标的理想选择。我们可以为每个相关的<thead>和<tbody>分配一个相同的data-group属性值。

优化后的HTML结构

通过为每个<thead>和其关联的<tbody>添加一个唯一的data-group属性，我们建立了一个逻辑上的分组关系。

讯飞绘文

讯飞绘文：免费AI写作/AI生成文章

118

查看详情

<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"将第一个<thead>与第一个<tbody>关联起来，data-group="2"则关联了第二个<thead>和<tbody>，以此类推。

JavaScript实现详解

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

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

$(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毫秒后

以上就是使用jQuery实现带分组表头的表格数据动态过滤的详细内容，更多请关注php中文网其它相关文章！