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

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

问题概述

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

原始实现及局限

一个基本的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)
    });
  });
});

局限性分析

上述代码的局限性在于：

1. 它只对#myTable tbody tr元素进行过滤和显示/隐藏操作。
2. 元素完全不受影响，无论其关联的 中是否有匹配的行，所有的都会一直显示。 这导致用户在搜索时，可能会看到一堆不包含任何相关内容的表头，降低了用户体验。

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

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

   

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

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

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

   优化后的HTML结构

   通过为每个和其关联的

   添加一个唯一的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逻辑将进行以下调整：

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

      $(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);
          });
        });
      });

      通过这种方式，我们确保了表头与表体内容之间的逻辑关联，实现了更加智能和用户友好的表格过滤功能。

      注意事项

      1. 性能优化：对于包含成千上万条记录的超大型表格，纯客户端的DOM操作可能会导致性能瓶颈。在这种情况下，可以考虑以下策略：
         • 虚拟滚动 (Virtual Scrolling)：只渲染视口内可见的行。
         • 服务器端过滤：将搜索请求发送到后端，由服务器返回过滤后的数据。
         • 防抖 (Debounce)：限制keyup事件的触发频率，例如在用户停止输入500毫秒后