本教程将详细介绍如何使用jquery实现对包含多个``和`
`部分的复杂html表格进行智能筛选。通过引入`data-group`属性关联表头和其对应内容，我们能够确保在筛选过程中，不仅能精确显示匹配的表格行，还能同步展示其所属的``，从而提供更直观、用户友好的交互体验。在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结构：
<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>这段代码的问题在于，它只对
为了解决这个问题，我们需要一种机制来关联和
核心思路是为每个及其对应的
添加一个自定义的data-group属性，用以建立它们之间的逻辑关联。然后，在过滤时，我们遍历每个，检查它自身是否匹配搜索词，或者其关联的 内是否有任何行匹配搜索词。只要满足其中一个条件，该及其匹配的 行就应该显示。首先，修改HTML，为每个和其紧邻的
添加相同的data-group属性。这个属性的值可以是任何唯一标识符，例如数字。
<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部分。我们将修改过滤函数，使其能够利用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);
});
});
});通过引入data-group属性，我们成功地为复杂的多头部HTML表格实现了一个智能且用户友好的过滤功能。这种方法不仅解决了传统过滤中和
以上就是jQuery多头部表格筛选：关联显示表头与内容的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
547
收藏
