讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI聊天问答 Agent智能体 AI文本写作 AI绘画作图 AI设计工具 AI视频创作 AI音频制作 AI办公学习 AI编程开发 AI提示词
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > html教程 >

正文

0

0

动态HTML表格过滤教程：实现交互式数据搜索

碧海醫心

碧海醫心

发布时间：2025-10-11 13:05:30

|

803人浏览过

|

来源于php中文网

原创

动态html表格过滤教程：实现交互式数据搜索

本教程详细介绍了如何使用JavaScript和jQuery为HTML表格实现动态过滤功能。通过一个搜索输入框，用户可以实时筛选表格数据。文章重点纠正了常见的实现错误，如`id`属性的错误放置和不正确的元素选择器，并提供了完整的代码示例和实践注意事项，帮助开发者构建高效且用户友好的数据展示界面。

1. 引言

在现代Web应用中，数据展示往往离不开表格。当表格数据量较大时，用户需要一种快速查找特定信息的方式。动态表格过滤功能应运而生，它允许用户通过输入关键词实时筛选表格内容，极大地提升了用户体验和数据可读性。本教程将指导您如何利用HTML、CSS和JavaScript（特别是jQuery）来实现这一功能，并指出在实现过程中常见的陷阱及如何避免它们。

2. 基本HTML结构

要实现表格过滤，我们需要一个输入框供用户输入搜索关键词，以及一个包含待过滤数据的HTML表格。关键在于为表格元素指定一个唯一的id，以便JavaScript能够准确地定位和操作它。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态HTML表格过滤</title>
    <!-- 引入jQuery库，通常放在head或body结束标签前 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        /* 简单的CSS样式，提升可读性 */
        body { font-family: Arial, sans-serif; margin: 20px; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        #myInput { padding: 8px; margin-bottom: 10px; width: 300px; }
    </style>
</head>
<body>

    <h2>测试结果报告</h2>

    <span>搜索关键词：</span>
    <input id="myInput" type="text" placeholder="输入关键词搜索...">
    <br><br>

    <!-- 关键：id="myTable" 应该在 <table> 标签上 -->
    <table id="myTable">
        <thead>
            <tr>
                <th style="text-align: right;">S.No</th>
                <th>Testcase</th>
                <th>Result:</th>
                <th>SECTION</th>
                <th>Reason</th>
                <th>Analysis</th>
            </tr>
        </thead>
        <tbody>
            <tr><td style="text-align: right;">0</td><td>CallsiteMemLeakReportInitial</td><td>FAILED</td><td>section test_case</td><td>Mem leak found before the run</td><td>Script issue</td></tr>
            <tr><td style="text-align: right;">1</td><td>FinalMemLeakReport</td><td>FAILED</td><td>section check_final_mem_leaks</td><td>Memory Leaks Found</td><td>Script issue</td></tr>
            <tr><td style="text-align: right;">2</td><td>CallsiteMemLeakReportFinal</td><td>FAILED</td><td>section test_case</td><td>Mem leak found before the run</td><td>Script issue</td></tr>
            <tr><td style="text-align: right;">3</td><td>InitialMemLeakReport</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">4</td><td>TriggerInterfaceFlaps</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">5</td><td>TriggerVlanInterfaceFlaps</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">6</td><td>TriggerClearIPOspfProcess</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">7</td><td>TriggerClearIPDTProcess</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">8</td><td>TriggerClearIPRouteProcess</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">9</td><td>TriggerClearAuthSessions</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">10</td><td>TriggerClearFlowMonitorCace</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">11</td><td>TriggerBgpNeighborFlap</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">12</td><td>TriggerVlanInterfaceFlaps</td><td>PASSED</td><td></td><td></td><td></td></tr>
        </tbody>
    </table>

    <script>
        // JavaScript/jQuery过滤逻辑将放在这里
    </script>

</body>
</html>

注意事项：

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

  • id="myTable" 必须直接应用于 <table> 标签，而不是其内部的 <tbody> 标签。这是实现表格过滤时一个常见的错误，因为它会导致选择器无法正确匹配整个表格行。
  • 引入jQuery库是必要的，本教程的过滤逻辑依赖于jQuery。

3. 核心JavaScript/jQuery过滤逻辑

过滤的核心思想是：当用户在输入框中输入内容时，遍历表格的每一行数据。如果某一行包含搜索关键词，则显示该行；否则，隐藏该行。

吉卜力风格图片在线生成
吉卜力风格图片在线生成

将图片转换为吉卜力艺术风格的作品

下载

以下是实现这一功能的jQuery代码：

$(document).ready(function() { // 确保DOM加载完成后执行
    $("#myInput").on("keyup", function() {
        // 1. 获取用户输入的搜索关键词，并转换为小写，以便进行大小写不敏感的匹配
        var value = $(this).val().toLowerCase();

        // 2. 遍历表格的每一行（<tr>元素）
        //    $("#myTable tr") 选择器会选中表格中的所有行，包括表头行（<thead>中的<tr>）和数据行（<tbody>中的<tr>）。
        //    .slice(1) 用于跳过表头行，只对数据行进行过滤操作。
        $("#myTable tr").slice(1).filter(function() {
            // 3. 获取当前行的所有文本内容，并转换为小写
            var rowText = $(this).text().toLowerCase();

            // 4. 判断当前行的文本是否包含搜索关键词
            //    indexOf(value) > -1 表示找到了关键词
            var isMatch = rowText.indexOf(value) > -1;

            // 5. 根据匹配结果显示或隐藏当前行
            //    $(this).toggle(true) 显示行
            //    $(this).toggle(false) 隐藏行
            $(this).toggle(isMatch);
        });
    });
});

代码解析：

  1. $(document).ready(function() { ... });: 这是一个jQuery的常用模式，确保所有DOM元素都已加载完毕后再执行内部代码，防止脚本试图操作尚未存在的元素。
  2. $("#myInput").on("keyup", function() { ... });: 监听ID为myInput的输入框的keyup事件。这意味着每次用户按下并释放一个键时，事件处理函数都会被触发。
  3. var value = $(this).val().toLowerCase();: 获取输入框当前的值，并使用.toLowerCase()将其转换为小写。这样做是为了实现大小写不敏感的搜索。
  4. $("#myTable tr").slice(1).filter(function() { ... });:
    • $("#myTable tr"): 这是一个关键选择器，它选中了ID为myTable的表格中的所有<tr>元素。
    • .slice(1): 这个方法非常重要。它从选定的<tr>集合中移除第一个元素。由于表格的第一个<tr>通常是表头（在<thead>中），我们不希望它被过滤掉，所以将其排除在外。
    • .filter(function() { ... });: 这是一个jQuery方法，用于遍历选定的元素集合，并根据回调函数的返回值（true或false）来决定是否保留该元素。
  5. $(this).text().toLowerCase();: 在filter回调函数内部，$(this)代表当前正在被遍历的<tr>元素。.text()方法获取该行内所有子元素的文本内容，然后同样转换为小写。
  6. rowText.indexOf(value) > -1: 这是进行匹配的核心逻辑。indexOf()方法返回子字符串在原字符串中第一次出现的位置。如果找到了，则返回一个非负整数；如果未找到，则返回-1。因此，> -1表示找到了匹配项。
  7. $(this).toggle(isMatch);: toggle()方法根据传入的布尔值来显示或隐藏元素。如果isMatch为true（找到关键词），则显示当前行；如果为false（未找到关键词），则隐藏当前行。

4. 完整示例代码

将HTML结构和JavaScript过滤逻辑结合起来，您将得到一个完整的、可工作的动态过滤表格。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态HTML表格过滤教程</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        #myInput { padding: 8px; margin-bottom: 10px; width: 300px; border: 1px solid #ccc; border-radius: 4px; }
    </style>
</head>
<body>

    <h2>测试结果报告</h2>

    <span>搜索关键词：</span>
    <input id="myInput" type="text" placeholder="输入关键词搜索...">
    <br><br>

    <table id="myTable">
        <thead>
            <tr>
                <th style="text-align: right;">S.No</th>
                <th>Testcase</th>
                <th>Result:</th>
                <th>SECTION</th>
                <th>Reason</th>
                <th>Analysis</th>
            </tr>
        </thead>
        <tbody>
            <tr><td style="text-align: right;">0</td><td>CallsiteMemLeakReportInitial</td><td>FAILED</td><td>section test_case</td><td>Mem leak found before the run</td><td>Script issue</td></tr>
            <tr><td style="text-align: right;">1</td><td>FinalMemLeakReport</td><td>FAILED</td><td>section check_final_mem_leaks</td><td>Memory Leaks Found</td><td>Script issue</td></tr>
            <tr><td style="text-align: right;">2</td><td>CallsiteMemLeakReportFinal</td><td>FAILED</td><td>section test_case</td><td>Mem leak found before the run</td><td>Script issue</td></tr>
            <tr><td style="text-align: right;">3</td><td>InitialMemLeakReport</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">4</td><td>TriggerInterfaceFlaps</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">5</td><td>TriggerVlanInterfaceFlaps</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">6</td><td>TriggerClearIPOspfProcess</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">7</td><td>TriggerClearIPDTProcess</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">8</td><td>TriggerClearIPRouteProcess</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">9</td><td>TriggerClearAuthSessions</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">10</td><td>TriggerClearFlowMonitorCace</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">11</td><td>TriggerBgpNeighborFlap</td><td>PASSED</td><td></td><td></td><td></td></tr>
            <tr><td style="text-align: right;">12</td><td>TriggerVlanInterfaceFlaps</td><td>PASSED</td><td></td><td></td><td></td></tr>
        </tbody>
    </table>

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

</body>
</html>

5. 注意事项与进阶

  1. id属性的正确位置： 再次强调，id="myTable"必须赋给<table>元素。如果将其放在<tbody>上，如原始问题所示，$("#myTable tr")选择器将无法找到表格的所有行，因为<tbody>本身不是<tr>的父级，且其id无法代表整个表格。
  2. 过滤目标的选择： 选择$("#myTable tr")是为了实现行级别的过滤，即整行显示或隐藏。如果错误地选择了$("#myTable td")，那么只会隐藏或显示单个单元格，导致表格结构混乱。
  3. 大小写不敏感： 通过将搜索关键词和表格内容都转换为小写（.toLowerCase()），实现了大小写不敏感的搜索，提升了用户体验。
  4. 跳过表头： .slice(1)方法确保了表头行不会被过滤隐藏，始终保持可见。
  5. 针对特定列的过滤： 如果您希望只在表格的某一列（例如“Result:”列）中进行搜索，可以修改rowText的获取方式。例如，要仅搜索第三列（索引为2），可以这样做：
    // ...
$("#myTable tr").slice(1).filter(function() {
    // 获取当前行的第三个单元格（td），并获取其文本
    var columnText = $(this).find('td:eq(2)').text().toLowerCase(); // :eq(2) 表示第三个td (0-indexed)
    $(this).toggle(columnText.indexOf(value) > -1);
});
// ...
  6. 性能优化（对于超大表格）： 对于包含数千甚至数万行的表格，每次按键都遍历所有行可能会导致性能问题。可以考虑以下优化：
    • 防抖（Debouncing）： 在用户停止输入一段时间（例如300ms）后再执行过滤操作，避免频繁触发。
    • 虚拟滚动（Virtual Scrolling）： 只渲染当前可见的表格行，对于大型数据集非常有效，但实现相对复杂。
    • 服务器端过滤： 将过滤逻辑放到后端，只请求并显示过滤后的数据。
  7. 用户体验与可访问性：
    • 为输入框提供清晰的placeholder文本。
    • 考虑为过滤结果为空的情况提供友好提示。
    • 确保键盘导航（如Tab键）在过滤输入框和表格中正常工作。

6. 总结

通过本教程，您应该已经掌握了使用jQuery实现HTML表格动态过滤的核心技术。关键在于理解正确的HTML结构（id在<table>上）和JavaScript选择器（针对<tr>而非<td>，并使用.slice(1)跳过表头）。这个简单而强大的功能可以显著改善用户与表格数据的交互体验。在实际应用中，您可以根据需求进一步扩展和优化，例如实现多条件过滤或结合其他UI库。

相关文章

HTML老版本浏览器HTML5标签怎么兼容_跨时代支持方法【解答】

HTML键盘输入标签怎么用_HTMLkbd元素添加键盘样式介绍【介绍】

如何让跨页PDF中的HTML表格在每页顶部重复显示表头

HTML样式不生效怎么办_HTML样式不生效故障排查解答【解答】

实现图片悬停放大并确保其始终位于最上层的CSS技巧
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

css javascript java jquery html js ajax go 回调函数 session 后端 jquery Filter 回调函数 字符串 var function 事件 dom this 选择器 table tbody td tr 性能优化 ui

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：HTML代码怎么实现错误处理_HTML代码错误捕获与异常处理方法及最佳实践 下一篇：JavaScript控制CSS动画重复触发失效问题及解决方案

作者最新文章

《宝可梦 Pokopia》简评：温暖人心的慢生活

2026-03-12 13:57

JTable 显示 CSV 数据时仅显示首列的完整解决方案

2026-03-12 13:57

如何在 Spring 中正确注入和使用抽象类的子类 Bean

2026-03-12 14:07

高德地图路线规划耗时过长怎么办

2026-03-12 14:07

阿里旺旺网页版登录入口在哪

2026-03-12 14:18

高效求解轮盘弹跳路径：基于循环检测的 O(n) 时间复杂度优化方案

2026-03-12 14:19

破次元恋人app如何注销

2026-03-12 14:25

App Engine Datastore 中基于游标的分页查询最佳实践

2026-03-12 14:37

如何高效地对字典列表进行排序（Python 教程）

2026-03-12 14:49

怪物乐土巨魔在哪里抓 怪物乐土巨魔位置

2026-03-12 15:00

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

AI编程开发AI聊天问答
豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

AI编程开发AI大模型
WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

AI办公学习Agent智能体
腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文档处理Excel 表格
文心一言
文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI编程开发AI文本写作
讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI文本写作中文写作
即梦AI
即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接图画生成
ChatGPT
ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI编程开发AI文本写作
智谱清言 - 免费全能的AI助手
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI编程开发Agent智能体

相关专题

更多
jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容，供大家免费下载体验。

156

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有：1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”；3、“$.each(obj, callback)”；4、“$.ajax()”。更多jquery怎么操作json的详细内容，可以访问本专题下面的文章。

337

2023.10.13

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

406

2023.11.10

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法，它用于绑定两个事件处理函数，这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容，可以阅读本专题下面的文章。

515

2023.12.04

jquery实现分页方法
jquery实现分页方法

在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容，可以阅读本专题下面的文章。

312

2023.12.06

jquery中隐藏元素是什么
jquery中隐藏元素是什么

jquery中隐藏元素是非常重要的一个概念，在使用jquery隐藏元素之前，需要先了解css样式中关于元素隐藏的属性，比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

129

2024.02.23

jquery中什么是高亮显示
jquery中什么是高亮显示

jquery中高亮显示是指对页面搜索关键词时进行高亮显示，其实现办法：1、先获取要高亮显示的行，获取搜索的内容，再遍历整行内容，最后添加高亮颜色；2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

183

2024.02.23

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全，阅读专题下面的文章了解更多详细内容。

51

2026.01.13

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开，深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析，帮助开发者构建类型安全、结构清晰、易维护的前端工程体系，提高团队协作效率与代码质量。

49

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
php商城系统
淘源码商城PHP淘宝查信誉
PHP房产程序[BBWPS]
PHP简约自动发卡平台个人版
ERMEB域名PHP离线网络授权系统
Difeye-敏捷的轻量级PHP框架
大泉州汽车网PHP整站程序

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

CSS教程
CSS教程

共754课时 | 43.4万人学习

最新文章

更多
VSCode主题怎么改HTML_编辑器外观设置操作【操作】
实现图片悬停放大并确保其始终位于其他图像上方的完整方案
如何用单个按钮同时切换图片与文字内容
实现图片悬停放大并置顶显示的完整CSS方案
Notepad++怎么高亮HTML_编辑器语法高亮介绍【介绍】
如何让网站图片在缩放和响应式浏览中自适应显示
html文件怎么创建_新建html文档步骤【入门】
实现图片悬停放大并置顶显示的完整 CSS 解决方案
如何让网站图片在缩放时自适应显示而不被裁剪或隐藏
HTML图像加载失败怎么办_图像故障排查方法【解答】
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部