本文将指导您如何利用jquery实现一个高效的表格数据动态过滤功能，尤其适用于包含多个独立分组表头（`
`）的复杂表格。通过引入`data-group`属性关联表头和表体，我们能够智能地根据搜索内容，精确地显示或隐藏相应的表头及其关联的行，从而优化用户体验和数据呈现。问题概述
在网页开发中，动态过滤表格数据是一项常见需求。当表格包含多个独立的表头（
）和表体（）组时，例如一个大型表格被逻辑上划分为多个部门或类别，简单的行过滤逻辑将无法满足需求。用户期望的是，当搜索内容匹配到某个表体行时，其对应的表头也应显示；如果表头本身的内容匹配搜索词，该表头及其关联的行也应显示。传统的jQuery过滤方法往往只针对表格行（），导致即使所有行都被过滤掉，表头仍然全部显示，造成信息展示的混乱。
原始实现及局限
一个基本的jQuery表格过滤功能通常会监听输入框的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) }); });});
局限性分析
上述代码的局限性在于：
它只对#myTable tbody tr元素进行过滤和显示/隐藏操作。
元素完全不受影响，无论其关联的中是否有匹配的行，所有的
都会一直显示。这导致用户在搜索时，可能会看到一堆不包含任何相关内容的表头，降低了用户体验。解决方案：利用数据分组属性
为了解决上述问题，我们需要一种机制来逻辑地关联每个
及其对应的。HTML5的data-*自定义属性是实现这一目标的理想选择。我们可以为每个相关的
和分配一个相同的data-group属性值。
优化后的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″将第一个
与第一个关联起来，data-group=”2″则关联了第二个
和，以此类推。
JavaScript实现详解
有了分组属性后，我们的JavaScript逻辑将进行以下调整：
监听输入框事件：与之前相同，当用户在搜索框输入时触发。遍历每个
：而不是直接遍历，我们现在遍历每个 元素。获取分组ID：对于每个 ，获取其data-group属性值。检查 自身匹配：判断当前 的文本内容是否包含搜索词。查找关联的行：根据data-group值，找到所有属于该分组的中的元素。遍历并检查行匹配：遍历这些元素，判断它们的内容是否包含搜索词，并根据匹配结果切换行的可见性。同时，记录该分组内是否有任何行匹配成功。切换 和可见性：如果
自身匹配成功，或者其关联的中有任何行匹配成功，则显示该
及其对应的整个；否则，隐藏它们。
$(document).ready(function() { $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase().trim(); // 获取搜索值并转换为小写，去除首尾空格 $("#myTable thead").each(function() { // 遍历表格中的每个 thead 元素 var group = $(this).data("group"); // 获取当前 thead 的 data-group 属性值 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 匹配成功 // 遍历当前分组中的所有 tr 元素 for (var row of $(allRows)) { const isRowContentMatched = $(row).text().toLowerCase().indexOf(value) > -1; // 检查行内容是否匹配搜索词 $(row).toggle(isRowContentMatched); // 根据行内容匹配结果切换行的可见性 if (isRowContentMatched) { isAnyRowMatched = true; // 如果有行匹配成功，则设置标志位为 true } } // 切换当前 thead 的可见性：如果 thead 自身匹配成功，或者其关联的任何行匹配成功，则显示 thead $(this).toggle(isTheadMatched || isAnyRowMatched); // 切换当前 tbody 的可见性：与 thead 的逻辑保持一致，确保整个分组的显示/隐藏是同步的 $(`tbody[data-group='${group}']`).toggle(isTheadMatched || isAnyRowMatched); }); });});
通过这种方式，我们确保了表头与表体内容之间的逻辑关联，实现了更加智能和用户友好的表格过滤功能。
注意事项
性能优化：对于包含成千上万条记录的超大型表格，纯客户端的DOM操作可能会导致性能瓶颈。在这种情况下，可以考虑以下策略：虚拟滚动 (Virtual Scrolling)：只渲染视口内可见的行。服务器端过滤：将搜索请求发送到后端，由服务器返回过滤后的数据。防抖 (Debounce)：限制keyup事件的触发频率，例如在用户停止输入500毫秒后
以上就是使用jQuery实现带分组表头的表格数据动态过滤的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1599764.html
微信扫一扫 
支付宝扫一扫 
