使用jQuery实现多分区HTML表格的智能过滤与表头联动显示

本教程旨在解决多分区html表格过滤中，如何实现表头（thead）与表体（tbody）内容联动显示的问题。通过引入`data-group`属性对表格分区进行逻辑分组，并结合jquery的事件监听与dom操作，我们将展示一种智能过滤方案。该方案能够确保当表头或其关联的任何行匹配搜索条件时，对应的表头和表体内容都能正确显示，从而提供更直观、用户友好的表格数据过滤体验。

在现代Web应用中，表格是展示大量结构化数据的常用方式。当表格数据量较大或需要按逻辑分区展示时，我们常常会使用多个和

原始过滤方案的局限性

一个基础的表格过滤功能通常会监听输入框的keyup事件，然后遍历

考虑以下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]
    
  

对应的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)
    });
  });
});

上述代码能够有效地过滤

微信 WeLM

WeLM不是一个直接的对话机器人，而是一个补全用户输入信息的生成模型。

下载

优化方案：基于数据分组的智能过滤

为了解决上述问题，我们需要一种机制来将每个与其对应的

核心思路

1. 为每个和其对应的 添加一个相同的data-group属性，作为它们的唯一标识符。
2. 当用户输入搜索内容时，遍历每个。
3. 对于每个，首先检查其自身文本是否匹配搜索内容。
4. 然后，根据data-group属性找到所有关联的行。
5. 遍历这些行，检查是否有任何一行匹配搜索内容。
6. 如果自身匹配，或者其关联的 中有任何一行匹配，则显示该及其所有匹配或不匹配的关联 行。否则，隐藏整个分组。

   HTML结构调整

   我们需要为每个和紧随其后的

   添加一个data-group属性，并赋予其一个唯一的标识符（例如数字1、2、3等）。

   
     
   
   
     
   
       
   
         
   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代码将实现上述智能过滤逻辑：

   $(document).ready(function() {
     $("#myInput").on("keyup", function() {
       var value = $(this).val().toLowerCase().trim(); // 获取并处理搜索值
   
       // 遍历表格中的每一个 thead 元素
       $("#myTable thead").each(function() {
         var group = $(this).data("group"); // 获取当前 thead 的分组标识
   
         // 检查当前 thead 的文本内容是否匹配搜索值
         var isTheadMatched = $(this).text().toLowerCase().indexOf(value) > -1;
   
         // 构建选择器，查找与当前 thead 关联的 tbody 中的所有行
         var selector = `tbody[data-group='${group}'] tr`;
         var allRows = $('#myTable').find(selector);
         var isAnyRowMatched = false; // 标记此分组中是否有任何行匹配搜索值
   
         // 遍历所有关联的 tbody 行
         for (var row of $(allRows)) {
           // 判断当前行是否匹配搜索值
           const isRowMatched = $(row).text().toLowerCase().indexOf(value) > -1;
   
           // 只有当 thead 匹配 或 当前行匹配时，才显示此行
           // 注意：这里需要根据实际需求调整，如果 thead 匹配，可能希望显示所有行，
           // 或者只显示 thead 匹配且行自身也匹配的行。
           // 当前逻辑是：如果 thead 匹配，或者行自身匹配，则显示此行。
           $(row).toggle(isTheadMatched || isRowMatched); 
   
           // 只要有一行匹配，就更新 isAnyRowMatched 标记
           if (isRowMatched) {
             isAnyRowMatched = true;
           }
         }
   
         // 根据 thead 自身是否匹配，或其关联的 tbody 中是否有行匹配，来显示或隐藏 thead
         $(this).toggle(isTheadMatched || isAnyRowMatched);
   
         // 同时，需要处理关联 tbody 的可见性。
         // 如果 thead 或 any row 匹配，则显示整个 tbody。
         // 否则，隐藏整个 tbody。
         $(`tbody[data-group='${group}']`).toggle(isTheadMatched || isAnyRowMatched);
       });
     });
   });

   代码解析

   1. var value = $(this).val().toLowerCase().trim();: 获取输入框的值，转换为小写并去除首尾空格，以确保搜索的准确性和鲁棒性。
   2. $("#myTable thead").each(function() { ... });: 遍历表格中的每一个元素。这是关键，因为我们现在是基于每个逻辑分组（由代表）进行判断。
   3. var group = $(this).data("group");: 使用jQuery的data()方法获取当前的data-group属性值，这是我们关联和 的桥梁。
   4. var isTheadMatched = $(this).text().toLowerCase().indexOf(value) > -1;: 检查当前的文本内容是否包含搜索关键词。
   5. var selector = \tbody[data-group='${group}'] tr`;`: 动态构建一个CSS选择器，用于精确选取与当前具有相同data-group属性的所有 中的元素。
   6. var allRows = $('#myTable').find(selector);: 找到所有属于当前分组的行。
   7. for (var row of $(allRows)) { ... }: 遍历这些行。
      • const isRowMatched = $(row).text().toLowerCase().indexOf(value) > -1;: 检查当前行文本是否匹配搜索关键词。
      • $(row).toggle(isTheadMatched || isRowMatched);: 这一行是关键的过滤逻辑。它决定了单行的可见性。如果本身匹配搜索词，或者当前行匹配搜索词，那么该行就显示。这样确保了即使行本身不匹配，但其所属的匹配时，也能显示该行（及其所有兄弟行）。
      • if (isRowMatched) { isAnyRowMatched = true; }: 只要分组内有一行匹配，就将isAnyRowMatched设为true。
      • $(this).toggle(isTheadMatched || isAnyRowMatched);: 根据自身是否匹配，或其关联的 中是否有任何行匹配，来决定当前的整体可见性。
      • $(tbody[data-group='${group}']).toggle(isTheadMatched || isAnyRowMatched);: 同样，根据上述条件来决定其关联的整个的可见性。这确保了当一个分组被隐藏时，其 也随之隐藏。

        注意事项与扩展

        • 性能优化: 对于包含成千上万行的超大型表格，直接在客户端进行DOM操作可能会导致性能瓶颈。在这种情况下，可以考虑使用虚拟滚动（Virtual Scrolling）技术，或者将过滤逻辑转移到服务器端。
        • 用户体验:
          • 无结果提示: 当没有任何或 行匹配时，可以在表格下方显示“无匹配结果”的提示信息。
          • 高亮显示: 可以考虑对匹配的文本进行高亮显示，以便用户更快地定位到搜索结果。
          • Debounce/Throttle: 对于keyup事件，可以使用debounce或throttle技术来限制处理函数的调用频率，避免在用户快速输入时造成不必要的计算和DOM更新。
          • 多条件过滤: 如果需要支持更复杂的过滤逻辑（例如，通过多个输入框过滤不同的列，或AND/OR条件），则需要扩展过滤函数，构建更复杂的匹配逻辑。
          • 可访问性: 考虑为搜索输入框添加aria-label或aria-describedby等ARIA属性，提高可访问性。
          • CSS样式: 可以为过滤后的表格行或隐藏的行添加特定的CSS样式，以增强视觉反馈。

          总结

          通过引入data-group属性来逻辑分组和

          ，并结合jQuery的灵活DOM操作，我们成功实现了一个智能的表格过滤功能。这个方案不仅解决了多分区表格中与 联动显示的问题，还提供了清晰的逻辑结构，易于理解和扩展。在实际开发中，根据具体的业务需求和表格规模，可以进一步优化和扩展此方案，以提供更完善的用户体验。