使用jQuery实现多分区HTML表格的智能过滤与表头联动显示-html教程-PHP中文网

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

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

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

原始过滤方案的局限性

一个基础的表格过滤功能通常会监听输入框的keyup事件，然后遍历<tbody>中的每一行，根据行内容是否包含搜索关键词来切换其可见性。

考虑以下HTML结构，其中包含多个<thead>和<tbody>对：

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

登录后复制

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

秒哒

秒哒-不用代码就能实现任意想法

349

查看详情

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

为了解决上述问题，我们需要一种机制来将每个<thead>与其对应的<tbody>内容进行逻辑关联。data-*属性是实现这种关联的理想选择。

核心思路

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

HTML结构调整

我们需要为每个<thead>和紧随其后的<tbody>添加一个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>

登录后复制

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

登录后复制

代码解析

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

注意事项与扩展

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

总结

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

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