如何使用 jQuery 过滤 HTML 表格数据_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何使用 jQuery 过滤 HTML 表格数据

2025-10-11

浏览次数：次

返回列表

如何使用 jQuery 过滤 HTML 表格数据

本文介绍了如何使用 jquery 实现 html 表格数据的实时过滤功能。通过监听输入框的 `keyup` 事件，获取用户输入的关键词，并利用 jquery 的 `filter()` 方法筛选表格行，从而实现动态显示匹配的数据，提供更便捷的数据查找体验。本文包含详细的代码示例和解释，助你快速掌握表格过滤的实现方法。

### 实现表格过滤的步骤要实现表格过滤，主要分为以下几个步骤： 1. **HTML 结构准备：** 确保你的 HTML 表格结构正确，并包含一个用于输入过滤关键词的输入框。 2. **引入 jQuery 库：** 在 HTML 文件中引入 jQuery 库。 3. **编写 jQuery 代码：** 编写 jQuery 代码来监听输入框的 `keyup` 事件，获取用户输入，并过滤表格数据。 ### 代码示例以下是一个完整的代码示例，展示了如何使用 jQuery 实现表格过滤： ```html HTML Table Filter <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>

Table Filter

Name	Country
Alfreds Futterkiste	Germany
Berglunds snabbköp	Sweden
Centro comercial Moctezuma	Mexico
Ernst Handel	Austria

代码解释：

$(document).ready(function(){ ... });: 确保在文档加载完成后执行 jQuery 代码。
$("#myInput").on("keyup", function() { ... });: 监听 ID 为 myInput 的输入框的 keyup 事件。
var value = $(this).val().toLowerCase();: 获取输入框的值，并转换为小写，以便进行不区分大小写的搜索。
$("#myTable tr").slice(1).filter(function() { ... });: 选择 ID 为 myTable 的表格的所有 tr 元素，使用 slice(1) 排除表头行，然后使用 filter() 方法进行过滤。
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1): 对于每一行，获取其文本内容，转换为小写，然后使用 indexOf() 方法检查是否包含关键词。如果包含，则显示该行；否则，隐藏该行。