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

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

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

元素来组织内容。然而，标准的客户端表格过滤功能通常只针对中的行进行操作，这导致了一个常见问题：当用户搜索并过滤数据时，即使有匹配的行存在，其所属的部分也可能因为没有直接的过滤逻辑而被隐藏，或者所有都显示，造成信息混乱。本教程将详细介绍如何构建一个智能过滤功能，确保与内容的联动显示。

原始过滤方案的局限性

一个基础的表格过滤功能通常会监听输入框的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>

对应的J*aScript过滤代码可能如下：

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

上述代码能够有效地过滤

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

中的行。然而，它并未考虑的可见性。当所有属于某个的行都被过滤掉时，该仍然会显示，或者当用户搜索中的文本时，相关的行并不会显示。这显然不是我们期望的用户体验。

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

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

内容进行逻辑关联。data-*属性是实现这种关联的理想选择。

核心思路

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

我们需要为每个和紧随其后的
添加一个data-group属性，并赋予其一个唯一的标识符（例如数字1、2、3等）。
```
<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>
```
J*aScript实现

修改后的J*aScript代码将实现上述智能过滤逻辑：
```
$(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样式，以增强视觉反馈。

以上就是使用jQuery实现多分区HTML表格的智能过滤与表头联动显示的详细内容，更多请关注其它相关文章！

# javascript # 顺德网站建设补贴 # 推广网站偻云速捷甄选 # 邢台网站推广产品介绍 # 海外营销推广服务是什么意思 # 网站推广和优化的方法 # 抖音来客里面的营销推广 # 客户端 # 并结合 # 有任何 # 或其 # 选择器 # 这是 # 输入框 # 见性 # css # java # jquery # html # js # ajax # ai # cdn # 常见问题 # 性能瓶颈 # 遍历 # 多个 # 网站平台建设工作总结 # 协会网站建设总结范文 # seo属性设定 # seo 首页更新

返回目录在线咨询

上一篇：CSS实战：消除HTML表格行内元素默认边距造成的额外间距
下一篇：J*aScript async/await 异步执行序列问题详解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

原始过滤方案的局限性

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

核心思路

HTML结构调整

J*aScript实现

代码解析

注意事项与扩展

总结

您的项目需求