jQuery多头部表格筛选：关联显示表头与内容

本教程将详细介绍如何使用jquery实现对包含多个``和`

引言

在Web开发中，我们经常需要处理包含大量数据的表格。当表格结构复杂，特别是包含多个独立的表头（）及其对应的内容区域（

问题分析

考虑一个包含多个部门信息的表格，每个部门有自己的表头和数据行。如果用户搜索“Finance”，我们希望只显示“Information about department 2”这个表头及其下属的“Finance”相关行。一个简单的jQuery过滤代码可能如下：

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

以及其对应的HTML结构：

  


  

    

      
Information about department
    
  
  

    

      
Name - It
      
Phone - 1111111
      
E-mail - [email protected]
    
  
  

    

      
Information about department 2
    
  
  

    

      
Name - Finance
      
Phone - 1111112
      
E-mail - [email protected]
    
    

      
Name - Finance2
      
Phone - 1111113
      
E-mail - [email protected]
    
  

这段代码的问题在于，它只对

1. 如果某个内的所有都被过滤隐藏，但其对应的仍然显示，造成空表头。
2. 如果某个内有匹配的需要显示，但其对应的因为没有直接匹配搜索词而被隐藏，导致数据显示不完整。

   为了解决这个问题，我们需要一种机制来关联和

   

   魔珐星云

   无需昂贵GPU，一键解锁超写实/二次元等多风格3D数字人，跨端适配千万级并发的具身智能平台。

   下载
   ，并根据它们的整体匹配情况来决定各自的可见性。

   解决方案：基于数据分组的动态过滤

   核心思路是为每个及其对应的

   添加一个自定义的data-group属性，用以建立它们之间的逻辑关联。然后，在过滤时，我们遍历每个，检查它自身是否匹配搜索词，或者其关联的 内是否有任何行匹配搜索词。只要满足其中一个条件，该及其匹配的 行就应该显示。

   HTML结构优化

   首先，修改HTML，为每个和其紧邻的

   添加相同的data-group属性。这个属性的值可以是任何唯一标识符，例如数字。

   
     
   
   
     
   
       
   
         
   Information about department
       
     
     
   
       
   
         
   Name - It
         
   Phone - 1111111
         
   E-mail - [email protected]
       
     
     
   
       
   
         
   Information about department 2
       
     
     
   
       
   
         
   Name - Finance
         
   Phone - 1111112
         
   E-mail - [email protected]
       
       
   
         
   Name - Finance2
         
   Phone - 1111113
         
   E-mail - [email protected]
       
     
   
   

   JavaScript过滤逻辑

   接下来是关键的JavaScript部分。我们将修改过滤函数，使其能够利用data-group属性进行分组过滤。

   $(document).ready(function() {
     $("#myInput").on("keyup", function() {
       var value = $(this).val().toLowerCase().trim(); // 获取搜索值并转换为小写，去除首尾空格
   
       // 遍历表格中的每一个 thead 元素
       $("#myTable thead").each(function() {
         var group = $(this).data("group"); // 获取当前 thead 的 data-group 值
         // 检查 thead 本身是否包含搜索词
         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 元素
         for (var row of $(allRows)) {
           // 判断当前行是否匹配：如果 thead 匹配，或者行本身匹配
           const isRowMatched = isTheadMatched || $(row).text().toLowerCase().indexOf(value) > -1;
           $(row).toggle(isRowMatched); // 根据匹配结果显示或隐藏当前行
   
           // 如果行本身匹配搜索词，则更新 isAnyRowMatched 标记
           if ($(row).text().toLowerCase().indexOf(value) > -1) {
             isAnyRowMatched = true;
           }
         }
   
         // 根据 thead 自身是否匹配，或者其关联的 tbody 中是否有任何行匹配，来显示或隐藏 thead
         $(this).toggle(isTheadMatched || isAnyRowMatched);
       });
     });
   });

   代码详解

   1. $("#myInput").on("keyup", function() { ... });: 监听搜索输入框的keyup事件，当用户输入时触发过滤。
   2. var value = $(this).val().toLowerCase().trim();: 获取输入框的值，转换为小写，并使用trim()去除首尾空白字符，以提高搜索准确性。
   3. $("#myTable thead").each(function() { ... });: 这是关键的循环。它不再是遍历所有，而是遍历每个元素。对于每个，我们将其视为一个独立的逻辑分组的入口。
   4. var group = $(this).data("group");: 获取当前的data-group属性值，这是将与其对应 关联起来的桥梁。
   5. var isTheadMatched = $(this).text().toLowerCase().indexOf(value) > -1;: 检查当前的文本内容是否包含搜索词。
   6. var selector =tbody[data-group='${group}'] tr;: 使用模板字符串构建一个动态选择器，精确地选中与当前具有相同data-group属性的 内的所有元素。
   7. var allRows = $('#myTable').find(selector);: 找到所有关联的行。
   8. var isAnyRowMatched = false;: 初始化一个布尔变量，用于标记当前分组的中是否有任何行匹配搜索词。
   9. for (var row of $(allRows)) { ... }: 遍历当前分组中的所有行。
      • const isRowMatched = isTheadMatched || $(row).text().toLowerCase().indexOf(value) > -1;: 决定当前行是否应该显示。如果本身匹配搜索词，或者行本身匹配搜索词，则该行应该显示。
      • $(row).toggle(isRowMatched);: 根据isRowMatched的值显示或隐藏当前行。
      • if ($(row).text().toLowerCase().indexOf(value) > -1) { isAnyRowMatched = true; }: 如果当前行 本身 匹配搜索词（不依赖的匹配），则将isAnyRowMatched设置为true。这个条件很重要，因为它决定了即使不匹配但其内容匹配时，也应该显示。
      • $(this).toggle(isTheadMatched || isAnyRowMatched);: 最后，根据isTheadMatched（自身匹配）或isAnyRowMatched（关联的任何行匹配）来决定当前是否显示。

        注意事项与最佳实践

        • 唯一性data-group: 确保每个和其对应的 使用唯一的data-group值。如果表格结构是动态生成的，可以使用索引或其他唯一标识符来生成这些值。
        • 性能优化: 对于包含成千上万个分组的超大型表格，每次keyup事件都遍历所有和其所有可能会有性能开销。可以考虑：
          • 去抖（Debounce）: 使用setTimeout在用户停止输入一段时间后再执行搜索，减少不必要的计算。
          • 虚拟滚动: 对于极端大的表格，前端虚拟滚动或分页可能是更好的解决方案。
        • 搜索词处理: toLowerCase()和trim()是基本的文本处理。根据需求，可以增加对特殊字符的处理、全角半角转换等。
        • 用户反馈: 可以在搜索框旁边添加一个加载指示器，尤其是在数据量较大时，以提升用户体验。
        • 可访问性: 考虑为搜索框添加适当的ARIA属性，例如aria-label或aria-describedby，以提高屏幕阅读器用户的体验。

        总结

        通过引入data-group属性，我们成功地为复杂的多头部HTML表格实现了一个智能且用户友好的过滤功能。这种方法不仅解决了传统过滤中和

        显示不同步的问题，还提供了一种清晰的逻辑来管理分组数据的可见性。这种模式具有良好的可扩展性，可以根据具体需求进一步优化和增强。