使用 jQuery 实现 HTML 表格动态筛选功能教程

程序猿 • 2025年11月11日 07:58:25 • web前端 • 阅读 1

本教程将详细指导如何利用 jQuery 为 HTML 表格添加动态筛选功能。我们将探讨常见的实现误区，如选择器使用不当，并提供一个结构清晰、易于理解的解决方案。通过本文，您将掌握使用 `keyup` 事件监听用户输入，结合 `filter` 和 `toggle` 方法实现表格行的实时内容匹配与显示控制，从而提升用户与表格数据的交互体验。

引言：动态表格筛选的重要性

在现代Web应用中，表格是展示大量结构化数据的重要方式。当数据量庞大时，用户往往难以快速定位所需信息。此时，为表格添加动态筛选功能变得尤为重要。通过一个简单的搜索框，用户可以实时过滤表格内容，极大地提升了数据检索的效率和用户体验。本教程将聚焦于如何使用强大的JavaScript库jQuery来实现这一功能。

核心原理：jQuery 动态筛选机制

实现表格动态筛选主要依赖于以下几个jQuery核心方法和概念：

事件监听 (.on(“keyup”, function(){…})): 当用户在搜索框中输入或删除字符时，keyup 事件会被触发。我们在此事件处理函数中执行筛选逻辑。获取输入值 (.val().toLowerCase()): 获取搜索框中的当前文本内容，并将其转换为小写，以实现不区分大小写的搜索。元素筛选 (.filter(function(){…})): 遍历表格中的每一行（或单元格），并根据回调函数的返回值来决定是否保留该元素。内容匹配 (.text().toLowerCase().indexOf(value) > -1): 在 filter 的回调函数中，获取当前元素的文本内容，同样转换为小写，然后检查它是否包含搜索值。indexOf() 方法返回子字符串首次出现的索引，如果未找到则返回 -1。显示/隐藏元素 (.toggle(boolean)): 根据匹配结果（true 表示匹配，false 表示不匹配），使用 toggle() 方法来显示或隐藏表格行。

HTML 结构准备

一个规范的HTML表格结构对于实现动态筛选至关重要。它应该包含一个搜索输入框，以及具有

（表头）和

（表体）的

元素。特别需要注意的是，id 属性应赋给

元素，而不是

。这是因为筛选操作通常针对整个表格的行进行。

立即学习“前端免费学习笔记（深入）”；

以下是一个推荐的HTML结构示例：

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26 查看详情

            HTML 表格动态筛选                body { font-family: Arial, sans-serif; margin: 20px; }        input[type="text"] { padding: 8px; margin-bottom: 20px; width: 300px; border: 1px solid #ddd; }        table { width: 100%; border-collapse: collapse; margin-top: 20px; }        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }        th { background-color: #f2f2f2; }        .fortextbox { margin-left: 10px; } /* 示例样式，可根据需求调整 */                搜索内容:

S.No	Testcase	Result:	SECTION	Reason	Analysis
0	CallsiteMemLeakReportInitial	FAILED	section test_case	Mem leak found before the run	Script issue
1	FinalMemLeakReport	FAILED	section check_final_mem_leaks	Memory Leaks Found	Script issue
2	CallsiteMemLeakReportFinal	FAILED	section test_case	Mem leak found before the run	Script issue
3	InitialMemLeakReport	PASSED
4	TriggerInterfaceFlaps	PASSED
5	TriggerVlanInterfaceFlaps	PASSED
6	TriggerClearIPOspfProcess	PASSED
7	TriggerClearIPDTProcess	PASSED
8	TriggerClearIPRouteProcess	PASSED
9	TriggerClearAuthSessions	PASSED
10	TriggerClearFlowMonitorCace	PASSED
11	TriggerBgpNeighborFlap	PASSED
12	TriggerVlanInterfaceFlaps	PASSED

JavaScript/jQuery 实现步骤

最初，在尝试实现表格筛选时，一个常见的误区是将 id=”myTable” 赋给

元素，并使用 $(“#myTable td”) 作为筛选目标。然而，正确的做法是让 id=”myTable” 属于

标签，并且筛选操作应该作用于

内的每一行 (

)，而不是单个单元格 (

元素下的所有

（表格行）。这确保了我们只对数据行进行筛选，而不会影响到表头。filter(function() {…}): 遍历每一个匹配到的

元素。在回调函数中，this 指向当前的

DOM元素。$(this).text().toLowerCase(): 获取当前行的所有文本内容（包括所有单元格的文本），并转换为小写。indexOf(value) > -1: 检查行文本是否包含搜索值。$(this).toggle(isMatch): toggle() 方法根据传入的布尔值决定元素的显示或隐藏。如果 isMatch 为 true，则显示该行；如果为 false，则隐藏该行。

完整示例代码

将上述HTML结构和JavaScript代码结合起来，即可得到一个功能完整的动态筛选表格。

            HTML 表格动态筛选教程                    body { font-family: Arial, sans-serif; margin: 20px; }        input[type="text"] { padding: 8px; margin-bottom: 20px; width: 300px; border: 1px solid #ddd; }        table { width: 100%; border-collapse: collapse; margin-top: 20px; }        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }        th { background-color: #f2f2f2; }        .fortextbox { margin-left: 10px; }        动态表格筛选示例
            搜索内容:

)。这样可以确保整个行根据其内容进行显示或隐藏。

以下是修正后的jQuery代码，用于实现动态表格筛选：

$(document).ready(function() {    // 监听搜索输入框的 keyup 事件    $("#myInput").on("keyup", function() {        // 获取输入框的值，并转换为小写，以便进行不区分大小写的搜索        var value = $(this).val().toLowerCase();        // 筛选表格体 (tbody) 中的每一行 (tr)        // 注意：这里选择器是 $("#myTable tbody tr")，确保只筛选数据行        $("#myTable tbody tr").filter(function() {            // 获取当前行的所有文本内容，并转换为小写            // 然后检查是否包含搜索值            var rowText = $(this).text().toLowerCase();            var isMatch = rowText.indexOf(value) > -1;            // 根据匹配结果显示或隐藏当前行            $(this).toggle(isMatch);        });    });});

代码解释：

$(document).ready(function(){…}): 确保在DOM完全加载后再执行jQuery代码，防止出现元素未找到的错误。$(“#myInput”).on(“keyup”, function() {…}): 绑定 keyup 事件到ID为 myInput 的搜索框。var value = $(this).val().toLowerCase();: 获取用户输入并将其转换为小写。$(“#myTable tbody tr”).filter(function() {…}): 这是关键的修正。$(“#myTable tbody tr”)：这个选择器精确地定位到ID为 myTable 的表格内部的

S.No	Testcase	Result:	SECTION	Reason	Analysis
0	CallsiteMemLeakReportInitial	FAILED	section test_case	Mem leak found before the run	Script issue
1	FinalMemLeakReport	FAILED	section check_final_mem_leaks	Memory Leaks Found	Script issue
2	CallsiteMemLeakReportFinal	FAILED	section test_case	Mem leak found before the run	Script issue
3	InitialMemLeakReport	PASSED
4	TriggerInterfaceFlaps	PASSED
5	TriggerVlanInterfaceFlaps	PASSED
6	TriggerClearIPOspfProcess	PASSED
7	TriggerClearIPDTProcess	PASSED
8	TriggerClearIPRouteProcess	PASSED
9	TriggerClearAuthSessions	PASSED
10	TriggerClearFlowMonitorCace	PASSED
11	TriggerBgpNeighborFlap	PASSED
12	TriggerVlanInterfaceFlaps	PASSED

$(document).ready(function() { $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tbody tr").filter(function() { var rowText = $(this).text().toLowerCase(); var isMatch = rowText.indexOf(value) > -1; $(this).toggle(isMatch); }); }); });

注意事项与优化

HTML 结构规范性： 始终使用

和

来组织表格内容。这不仅有助于筛选逻辑的清晰实现，也提高了表格的语义性和可访问性。性能考量： 对于包含成千上万行的超大型表格，每次 keyup 事件都遍历所有行可能会导致性能问题。在这种情况下，可以考虑使用节流 (throttle) 或 防抖 (debounce) 技术来限制事件处理函数的执行频率。特定列筛选： 如果需要只对表格的某一列进行筛选（例如，只搜索“Testcase”列），可以修改 filter 回调函数内部的逻辑，使其只获取特定

元素的文本内容。例如，要筛选第二列：

$("#myTable tbody tr").filter(function() {    // $(this).children('td').eq(1) 获取当前行的第二个元素（索引从0开始）    var columnText = $(this).children('td').eq(1).text().toLowerCase();    $(this).toggle(columnText.indexOf(value) > -1);});

无结果提示： 当筛选结果为空时，可以考虑在表格下方显示一条“未找到匹配项”的提示信息，以增强用户体验。清空搜索框： 当用户清空搜索框时，所有被隐藏的行应自动重新显示。当前的实现已经能做到这一点，因为空字符串 “” 匹配所有内容。

总结

通过本教程，您应该已经掌握了使用 jQuery 为 HTML 表格添加动态筛选功能的核心技术。关键在于理解正确的HTML表格结构、jQuery选择器的精确使用以及 keyup、filter 和 toggle 方法的协同工作。通过灵活运用这些知识，您可以为用户提供更加高效和友好的数据交互体验。记住，始终关注代码的健壮性、性能和用户体验，以构建高质量的Web应用。

以上就是使用 jQuery 实现 HTML 表格动态筛选功能教程的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/623915.html

ai ajax go googl html java javascript jquery js session 回调函数

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

326.3K 文章

0 评论

1 粉丝

这个人很懒，什么都没有留下～

构建交互式数据统计程序：从用户输入中提取关键指标

上一篇 2025年11月11日 07:57:08

响应式设计：实现桌面三列布局到移动一列布局的转换

下一篇 2025年11月11日 07:59:09

好文分享

Python中msgpack库如何使用？

msgpack是一种高效的二进制序列化格式，比JSON更小更快，适用于网络通信和缓存存储。通过pip install msgpack安装，使用packb()/unpackb()进行内存中数据的序列化与反序列化，支持dict、list、str、int等基本类型。可使用dump()/load()操作文件…

程序猿
2025年12月15日
0000
python check函数如何使用？

答案：check函数是自定义函数，用于验证条件。1. 检查数据类型或范围，如check_age验证年龄是否为0-150的整数。2. 使用os.path检查文件是否存在。3. 检查字符串是否包含关键词。4. 结合异常处理，如check_positive抛出错误提示。 Python 中并没有一个叫 ch…

程序猿
2025年12月15日 • 好文分享
0000
好文分享

优化SpaCy Matcher模式匹配：理解与应用greedy参数解决长度冲突

本教程深入探讨了SpaCy `Matcher`在处理重叠模式时可能遇到的匹配长度冲突问题。当存在多个模式，其中一个模式是另一个模式的子集时，`Matcher`默认行为可能导致较短模式优先匹配，从而阻止更长、更具体的模式被识别。文章详细介绍了如何通过`Matcher.add()`方法中的`greedy…

程序猿
2025年12月15日
0000
好文分享

高效合并大量数据文件的策略：绕过解析实现快速连接

处理大量数据文件时，直接使用数据帧库的合并功能（如polars的`read_ipc`配合`rechunk=true`）可能因数据解析和内存重分块而导致性能瓶颈。本文介绍了一种绕过完整数据解析、直接在文件系统层面进行内容拼接的策略，以显著加速文件合并过程，并探讨了针对apache arrow等特定格式…

程序猿
2025年12月15日
0000
好文分享

使用Python PDDL框架构建旅行商问题：Effect表达式的正确姿势

本文旨在指导用户在使用`pddl` python框架构建旅行商问题（tsp）时，如何正确处理pddl动作的`effect`表达式。通过分析常见的`recursionerror`，揭示了将pddl逻辑表达式误用字符串拼接的错误，并提供了使用框架内置逻辑运算符（如`&`和`~`）来组合谓词的正确…

程序猿
2025年12月15日
0000
好文分享

Python中利用自定义类实现分层字符串常量与点符号路径自动构建

本文深入探讨如何在python中优雅地组织分层字符串常量，尤其适用于http端点路径等场景。通过自定义`endpoint`类，我们能够实现类似点符号的层级访问，并自动构建完整的路径字符串，显著提升代码的可读性、可维护性及开发效率。在构建需要与分层API（如RESTful服务）交互的Python客户…

程序猿
2025年12月15日
0000
好文分享

精通Django角色与权限管理：构建灵活的访问控制系统

django提供强大的用户、组和权限系统，可用于实现精细的角色访问控制。本文将深入探讨如何利用django的内置功能，结合自定义逻辑，为不同用户角色（如经理、普通用户）分配差异化的数据访问权限，特别是如何实现部门级数据隔离，确保系统安全与业务需求。我们将从模型设计、组与权限配置，到视图层的数据过滤，…

程序猿
2025年12月15日
0000
好文分享

python中如何实现自动化操纵浏览器？

Selenium库可用于Python中自动化操纵浏览器，支持Chrome、Firefox等，通过安装selenium包和对应驱动实现；示例包括打开百度、定位搜索框输入“Python”并提交；常用操作有元素定位、点击、输入、获取页面信息及等待机制；可通过ChromeOptions设置无头模式运行；尽管…

程序猿
2025年12月15日
0000
好文分享

从Google Drive下载并解压ZIP文件至Colab Notebook

本教程详细介绍了如何在Google Colab环境中，无需挂载Google Drive，从公共Google Drive链接下载并解压ZIP文件。文章分析了常见的`BadZipFile`错误原因，提供了使用`requests`库构建正确下载URL的方法，并重点推荐了更便捷、鲁棒的`gdown`库，以确…

程序猿
2025年12月15日
0000
好文分享

从HTML表单获取逗号分隔值：转换为NumPy数组并用于机器学习预测

本教程详细讲解了如何处理从HTML表单获取的逗号分隔字符串，将其正确转换为NumPy数值数组，并解决机器学习模型预测时常见的数组形状错误。通过字符串解析、类型转换和数组重塑，确保输入数据符合模型要求，实现准确预测。从HTML表单获取逗号分隔值的挑战与解决方案在Web应用开发中，我们经常需要从用户…

程序猿
2025年12月15日
0000
好文分享

如何在python django框架里搭建环境？

首先配置Python环境并创建虚拟环境，然后安装Django并初始化项目。具体步骤为：安装Python 3.8+，使用venv创建隔离环境，激活后通过pip install django安装框架，再用django-admin startproject创建项目，运行runserver启动服务，最后生成…

程序猿
2025年12月15日
0000
好文分享

如何使用python中的pypy解释器？

PyPy是Python的高性能替代解释器，通过JIT技术提升执行速度。安装方式因系统而异：Ubuntu用sudo apt install pypy3，macOS用brew install pypy3，Windows需从官网下载并配置环境变量。运行脚本使用pypy3命令，如pypy3 hello.py…

程序猿
2025年12月15日
0000
python中pickle模块是什么?

pickle模块用于Python对象的序列化和反序列化，可将列表、字典、类实例等保存到文件或用于网络传输；基本用法包括使用pickle.dump()写入数据和pickle.load()读取数据；需注意其生成的是二进制格式，仅限Python内部使用，存在安全风险和版本兼容性问题，不适用于跨语言场景。 …

程序猿
2025年12月15日 • 好文分享
0000
好文分享

如何使用Python Flashtext模块？

Flashtext是一款高效Python模块，利用Trie树结构实现快速关键词提取与替换，支持批量添加、不区分大小写模式，适用于日志处理、敏感词过滤等场景，性能优于正则表达式。 Flashtext 是一个高效的 Python 模块，用于在文本中快速提取关键词或替换多个关键词。相比正则表达式，它在处理…

程序猿
2025年12月15日
0000
好文分享

python日志记录器的配置

日志配置需设置级别、格式和输出目标，推荐使用字典配置管理。1. 设置日志级别为DEBUG或INFO以控制输出；2. 自定义格式包含时间、级别、模块名等；3. 输出到文件和控制台；4. 创建独立logger实例避免全局调用；5. 使用dictConfig集中管理复杂配置，防止重复handler和错误传…

程序猿
2025年12月15日
0000
好文分享

python协程里yield from如何使用？

yield from用于委托生成器执行，可简化代码并实现数据透传、异常传递和双向通信。在Python协程中，yield from 主要用于委托生成器或协程的执行，把当前生成器的操作“转发”给另一个可迭代对象或子生成器。它不仅简化了代码，还能让外层生成器直接与内层生成器通信，实现数据的透传和异常传递…

程序猿
2025年12月15日
0000
好文分享

_str_如何在python中进行重载？

Python中无法重载__str__方法，但可通过对象状态实现条件输出。1. __str__用于定义print或str时的字符串表示，每个类仅能有一个该方法。2. 可在方法内根据属性值返回不同格式的字符串，如Person类按年龄是否存在调整输出。3. 虽不支持参数重载，但可用functools.si…

程序猿
2025年12月15日
0000
好文分享

python缩减exe文件内存

使用PyInstaller精简打包可减小exe体积，排除冗余模块并用UPX压缩，同时优化代码以降低内存占用。 Python生成的exe文件通常体积较大，主要是因为打包工具（如PyInstaller）会把整个Python解释器和所有依赖库打包进去。虽然完全“缩减内存”运行时占用较难，但可以有效减小ex…

程序猿
2025年12月15日
0000
好文分享

小数在python取整除运算符中输出

取整除运算符//先进行除法再向负无穷取整，结果类型与操作数一致。例如7.0//2.0为3.0，-7.0//2.0为-4.0，等价于math.floor()而非int()。在 Python 中，取整除运算符是 //，它也被称为“地板除”或“整除”。当对小数使用 // 时，Python 会先进行除法运…

程序猿
2025年12月15日
0000
好文分享

python aiml库如何安装及使用？

PyAIML是Python中用于实现AIML规范的第三方库，可构建简单聊天机器人。通过pip install pyaiml安装，需注意其可能不兼容Python 3.9+，可改用aiml-python3。使用时创建Kernel对象，加载std-startup.xml配置文件以引入basic-chat.…

程序猿
2025年12月15日
0000