17370845950

本教程详细介绍了如何使用jQuery和HTML的`data-group`属性，实现对包含多个`thead`部分的复杂表格进行高效的数据过滤。通过将`thead`和其对应的`tbody`逻辑分组，我们能够确保在搜索时，不仅显示匹配的行，还能同时显示其所属的标题部分，从而提升用户体验和数据可读性。

在现代Web应用中，展示大量数据通常会采用表格形式。当表格数据量庞大且结构复杂，例如包含多个逻辑分区，每个分区都有自己的标题（）时，实现一个用户友好的搜索过滤功能就显得尤为重要。传统的表格过滤方法往往只关注

中的行（），而忽略了与这些行相关联的部分的可见性，这可能导致用户在过滤后失去上下文信息。

挑战：多thead表格的过滤问题

假设我们有一个大型表格，其中包含多个独立的部门信息，每个部门都由一个作为标题，紧随其后是该部门的具体数据行（

）。当用户输入搜索关键词时，我们期望的行为是：

1. 如果某个中的行匹配搜索词，则该行应显示。
2. 与该匹配行关联的也应该显示，即使本身的内容不匹配搜索词。
3. 如果本身的内容匹配搜索词，则该及其所有关联的 行都应该显示。
4. 不匹配的和 行应被隐藏。

   原始的过滤逻辑通常只针对tbody tr元素：

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

   这种方法的问题在于，它只会根据

   的内容来切换其可见性，而不会考虑其父级。结果是，即使有匹配的显示出来，其所属的也可能因为没有直接匹配搜索词而被隐藏，导致表格结构混乱，用户难以理解显示的数据属于哪个分类。

   解决方案：利用data-group属性进行逻辑分组

   为了解决上述问题，我们可以引入自定义的HTML data属性来建立和

   之间的逻辑关联。通过为每个和其对应的 分配一个相同的data-group值，我们可以在JavaScript中轻松地识别和操作这些分组。

   1. 修改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]
       
     
   
   

   这里，我们为每个和

   对分配了一个唯一的data-group值（例如"1", "2"等）。

   2. 优化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 具有相同 data-group 的 tbody 中的所有 tr
         var selector = `tbody[data-group='${group}'] tr`;
         var allRows = $('#myTable').find(selector);
         var isAnyRowMatched = false; // 标志，表示当前分组中是否有任何行匹配搜索词
   
         // 遍历当前分组中的所有 tbody 行
         for (var row of $(allRows)) {
           // 判断当前行是否应该显示：
           // 1. thead 本身匹配搜索词 (isTheadMatched)
           // 2. 或者当前行内容匹配搜索词
           const isRowMatched = isTheadMatched || $(row).text().toLowerCase().indexOf(value) > -1;
           $(row).toggle(isRowMatched); // 切换行的显示/隐藏
   
           // 如果当前行内容匹配搜索词（即使 thead 不匹配），则标记此分组有匹配项
           if ($(row).text().toLowerCase().indexOf(value) > -1) {
             isAnyRowMatched = true;
           }
         }
   
         // 切换当前 thead 的显示/隐藏：
         // 如果 thead 本身匹配搜索词，或者其关联的 tbody 中有任何行匹配搜索词，则显示 thead
         $(this).toggle(isTheadMatched || isAnyRowMatched);
       });
     });
   });

   代码解析：

   1. 事件监听与预处理： 当用户在搜索框输入时触发keyup事件，获取输入值并转换为小写，并使用trim()去除可能存在的首尾空格，确保搜索的准确性。
   2. 遍历： 代码不再直接操作 ，而是遍历表格中的每一个元素。
   3. 获取分组信息： 对于每个，获取其data-group属性值，这将用于定位其对应的 。
   4. 自身匹配判断： 检查当前的文本内容是否包含搜索词。
   5. 查找关联行： 使用data-group值构建一个选择器（例如tbody[data-group='1'] tr），精确地找到与当前关联的所有 行。
   6. 行匹配判断与显示：
      • 遍历这些关联的行。
      • 对于每一行，判断它是否应该显示：如果本身匹配搜索词，或者当前行匹配搜索词，则该行显示。
      • 同时，使用isAnyRowMatched标志记录当前分组中是否有任何行匹配搜索词。
      • 显示逻辑： 最后，根据以下条件切换当前的显示状态：
        • 本身匹配搜索词 (isTheadMatched)。
        • 或者，其关联的中有任何一行匹配搜索词 (isAnyRowMatched)。 只要满足其中一个条件，就会显示，否则隐藏。

          完整示例代码

          
          
          
          
          
          
          
          
          
          
          
          
            
          带有分组标题的表格数据过滤
          
            
              
            
          
            
          
              
              
          
                
          
                  
          部门信息：IT部
                
              
              
          
                
          
                  
          姓名 - Tom
                  
          电话 - 1111111
                  
          邮箱 - tom@example.com
                
                
          
                  
          姓名 - Jerry
                  
          电话 - 1111112
                  
          邮箱 - jerry@example.com
                
              
          
              
              
          
                
          
                  
          部门信息：财务部
                
              
              
          
                
          
                  
          姓名 - Alice
                  
          电话 - 2222221
                  
          邮箱 - alice@example.com
                
                
          
                  
          姓名 - Bob
                  
          电话 - 2222222
                  
          邮箱 - bob@example.com
                
                
          
                  
          姓名 - Bob Junior
                  
          电话 - 2222223
                  
          邮箱 - bobjr@example.com
                
              
          
              
              
          
                
          
                  
          部门信息：市场部
                
              
              
          
                
          
                  
          姓名 - Carol
                  
          电话 - 3333331
                  
          邮箱 - carol@example.com
                
              
            
          
          
          
          
          
          
          

          注意事项与最佳实践

          • data-group值的唯一性： 确保每个和其对应的 的data-group值是唯一的，以便正确关联。
          • 性能考量： 对于包含成千上万个和 分组的巨型表格，每次keyup事件都遍历所有和 可能会有性能开销。可以考虑：
            • 防抖（Debounce）： 限制keyup事件触发的频率，例如在用户停止输入一段时间后才执行搜索。
            • 虚拟滚动（Virtual Scrolling）： 如果表格行数极其庞大，只渲染视口内的行，这会使过滤逻辑更复杂但性能更高。
          • 用户体验： 可以在搜索框旁边添加一个清除按钮，方便用户快速清空搜索内容并恢复表格的完整视图。
          • 可访问性： 确保过滤功能对屏幕阅读器等辅助技术是可访问的。
          • 多语言支持： 如果表格内容是多语言的，确保搜索逻辑能够处理不同语言的字符集。

          总结

          通过巧妙地利用HTML的data-group属性来建立和

          之间的逻辑关联，并结合jQuery的遍历和选择器功能，我们成功实现了一个功能强大且用户友好的表格数据过滤方案。这个方案不仅能够精确地过滤数据行，还能智能地管理其所属标题的可见性，极大地提升了复杂表格的可读性和交互体验。这种分组过滤的思路同样可以应用于其他需要结构化内容筛选的场景。