在网页数据展示场景中，表格是非常常用的组件，当表格数据量较大时，用户查找特定内容会变得很麻烦，这时候给表格添加动态筛选功能就能大幅提升使用体验。下面我们就一步步学习如何用jQuery实现HTML表格的动态筛选功能。
实现前准备
首先我们需要有一个基础的HTML表格结构，同时引入jQuery库，这里我们使用CDN引入的方式，你也可以下载本地文件引入。下面是基础的页面结构代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery表格动态筛选示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.filter-input {
margin-bottom: 10px;
padding: 5px;
width: 200px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background-color: #f5f5f5;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<!-- 筛选输入框 -->
<input type="text" class="filter-input" placeholder="输入关键词筛选表格内容">
<!-- 目标表格 -->
<table id="data-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
<td>前端开发</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
<td>后端开发</td>
</tr>
<tr>
<td>王五</td>
<td>22</td>
<td>广州</td>
<td>UI设计</td>
</tr>
<tr>
<td>赵六</td>
<td>28</td>
<td>深圳</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</body>
</html>核心实现逻辑
动态筛选的核心思路是监听输入框的输入事件，每次输入内容变化时，遍历表格的所有行，检查行内是否包含输入的关键词，包含则显示，不包含则隐藏。具体步骤如下：
- 给筛选输入框绑定
input事件，实时监听输入内容变化 - 获取输入框的当前值，转为小写方便做不区分大小写的匹配
- 遍历表格的
<tbody>下的所有<tr>行 - 对每一行，检查其所有
<td>单元格的文本内容是否包含关键词 - 根据匹配结果切换行的显示或隐藏状态
完整jQuery代码实现
把下面的代码放在页面的<script>标签中，或者单独的js文件中引入即可：
$(function() {
// 监听筛选输入框的输入事件
$('.filter-input').on('input', function() {
// 获取输入的关键词，转小写处理，去除首尾空格
var keyword = $(this).val().trim().toLowerCase();
// 如果关键词为空，显示所有行
if (keyword === '') {
$('#data-table tbody tr').removeClass('hidden');
return;
}
// 遍历表格的所有数据行
$('#data-table tbody tr').each(function() {
var $row = $(this);
var rowText = '';
// 拼接当前行所有单元格的文本内容
$row.find('td').each(function() {
rowText += $(this).text().toLowerCase();
});
// 判断是否包含关键词，不包含则添加隐藏类
if (rowText.indexOf(keyword) === -1) {
$row.addClass('hidden');
} else {
$row.removeClass('hidden');
}
});
});
});代码解析
上面的代码中，我们使用$(function() {})确保DOM加载完成后再执行脚本，避免找不到元素的问题。输入框的input事件会在用户输入、删除、粘贴等操作时触发，保证筛选实时生效。
遍历行的时候，我们把一行的所有单元格文本拼接起来统一判断，而不是逐个单元格判断，这样可以实现只要行内任意单元格包含关键词就显示该行的效果，更符合用户的筛选预期。如果只需要匹配特定列，可以修改单元格选择的逻辑，比如只匹配姓名列就改成$row.find('td:first')即可。
扩展优化建议
如果需要更灵活的筛选功能，还可以做以下扩展：
- 给不同列添加单独的筛选输入框，实现多条件组合筛选
- 添加筛选结果计数，显示当前匹配到的行数
- 支持正则表达式筛选，满足更复杂的匹配需求
- 给匹配到的关键词添加高亮样式，方便用户快速定位
需要注意的是，这种前端筛选方式仅适用于表格数据已经全部加载到页面的情况，如果表格数据是分页从后端请求的，需要结合后端接口实现筛选逻辑。
jQueryHTML_table动态筛选DOM操作修改时间：2026-05-29 17:20:16