如何使用 jQuery 过滤 HTML 表格数据
在网页开发中，表格是展示结构化数据的常用组件，当表格数据量较大时，用户往往需要快速筛选符合特定条件的内容。jQuery 作为轻量级的 JavaScript 库，提供了简洁的 DOM 操作和事件处理能力，非常适合实现表格数据的过滤功能。本文将介绍两种常见的表格过滤场景，分别是基于输入框的实时文本过滤和基于下拉选择的条件过滤。
基础表格结构准备
首先我们需要准备一个基础的 HTML 表格，作为过滤功能的操作对象。表格包含表头和若干数据行，后续的所有过滤逻辑都会基于这个表格结构实现。
<!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>
table {
border-collapse: collapse;
width: 80%;
margin: 20px auto;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.filter-container {
width: 80%;
margin: 0 auto 20px;
}
.filter-input {
width: 300px;
padding: 6px;
margin-right: 10px;
}
.filter-select {
padding: 6px;
}
.no-data {
text-align: center;
color: #999;
display: none;
}
</style>
</head>
<body>
<div class="filter-container">
<!-- 文本过滤输入框 -->
<input type="text" class="filter-input" placeholder="输入关键词过滤表格内容">
<!-- 下拉条件过滤 -->
<select class="filter-select">
<option value="all">全部状态</option>
<option value="已完成">已完成</option>
<option value="进行中">进行中</option>
<option value="未开始">未开始</option>
</select>
</div>
<table id="dataTable">
<thead>
<tr>
<th>任务名称</th>
<th>负责人</th>
<th>状态</th>
<th>完成时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>用户登录模块开发</td>
<td>张三</td>
<td>已完成</td>
<td>2024-01-15</td>
</tr>
<tr>
<td>商品列表页优化</td>
<td>李四</td>
<td>进行中</td>
<td>2024-02-20</td>
</tr>
<tr>
<td>支付接口对接</td>
<td>王五</td>
<td>未开始</td>
<td>2024-03-10</td>
</tr>
<tr>
<td>后台管理权限开发</td>
<td>张三</td>
<td>进行中</td>
<td>2024-02-28</td>
</tr>
<tr>
<td>移动端适配调整</td>
<td>赵六</td>
<td>已完成</td>
<td>2024-01-30</td>
</tr>
</tbody>
</table>
<p class="no-data">没有找到匹配的数据</p>
</body>
</html>上面的代码构建了一个包含 5 条任务数据的表格，同时添加了文本输入框和下拉选择框作为过滤控件，还准备了无匹配数据时的提示元素。注意这里提到的 <table>、<input>、<select> 等标签都按照规则进行了转义，避免被浏览器解析为实际标签。
实时文本过滤实现
实时文本过滤是指用户在输入框中输入内容时，表格会自动筛选所有单元格中包含该关键词的行，不匹配的行会被隐藏。实现这个功能的逻辑是监听输入框的 input 事件，每次输入变化时获取关键词，遍历表格的所有数据行，检查行内任意单元格的内容是否包含关键词，最后控制行的显示和隐藏。
$(function() {
// 监听文本输入框的输入事件
$('.filter-input').on('input', function() {
// 获取输入的关键词，转为小写方便不区分大小写匹配
var keyword = $(this).val().trim().toLowerCase();
// 获取下拉选择的状态值
var statusFilter = $('.filter-select').val();
// 调用过滤函数
filterTable(keyword, statusFilter);
});
/**
* 表格过滤核心函数
* @param {string} keyword - 文本过滤关键词
* @param {string} status - 状态过滤条件
*/
function filterTable(keyword, status) {
var $rows = $('#dataTable tbody tr');
var hasVisibleRow = false;
// 遍历所有表格行
$rows.each(function() {
var $row = $(this);
var rowText = $row.text().toLowerCase();
// 获取当前行的状态列内容，假设状态是第三列（索引2）
var rowStatus = $row.find('td').eq(2).text().trim();
// 判断是否符合文本过滤条件：关键词为空或者行文本包含关键词
var matchKeyword = keyword === '' || rowText.indexOf(keyword) !== -1;
// 判断是否符合状态过滤条件：选择全部或者状态匹配
var matchStatus = status === 'all' || rowStatus === status;
// 同时满足两个条件才显示行
if (matchKeyword && matchStatus) {
$row.show();
hasVisibleRow = true;
} else {
$row.hide();
}
});
// 根据是否有可见行控制无数据提示的显示
if (hasVisibleRow) {
$('.no-data').hide();
} else {
$('.no-data').show();
}
}
});这段代码中，我们首先通过 $(function() {}) 确保 DOM 加载完成后执行逻辑，然后给文本输入框绑定 input 事件，每次输入变化都会获取当前的关键词和状态筛选条件，调用 filterTable 函数执行过滤。函数内部遍历所有表格行，同时检查文本匹配和状态匹配两个条件，只有同时满足的行才会显示，最后根据是否有可见行控制无数据提示的显示状态。
下拉条件过滤实现
下拉条件过滤是指用户选择特定选项时，表格只显示对应条件的行，比如选择“已完成”时只展示状态为已完成的任务。我们可以复用上面的 filterTable 函数，只需要给下拉选择框绑定 change 事件即可。
$(function() {
// 之前的文本过滤事件代码...
// 监听下拉选择框的change事件
$('.filter-select').on('change', function() {
// 获取当前选择的状态值
var statusFilter = $(this).val();
// 获取文本输入框的当前关键词
var keyword = $('.filter-input').val().trim().toLowerCase();
// 调用过滤函数
filterTable(keyword, statusFilter);
});
// filterTable函数定义...
});这里给下拉选择框绑定了 change 事件，当用户切换选项时，会获取当前的状态值和文本输入框的关键词，同样调用 filterTable 函数执行过滤。这样两种过滤方式可以协同工作，用户既可以输入关键词缩小范围，也可以选择状态进一步筛选，实现组合过滤的效果。
功能优化建议
上述实现已经可以满足基础的表格过滤需求，实际使用中还可以根据场景做进一步优化：
- 如果表格数据量非常大，遍历所有行可能会影响性能，可以添加防抖处理，避免用户快速输入时频繁触发过滤逻辑。
- 可以支持按指定列过滤，比如只过滤任务名称列或者负责人列，而不是匹配所有单元格内容，只需要在检查匹配时指定对应的列即可。
- 可以添加清除过滤的按钮，点击后同时清空输入框和重置下拉选择框，快速恢复表格全部数据的展示。
- 如果表格数据是动态加载的，需要在数据更新后重新执行一次过滤逻辑，保证过滤状态和数据同步。
通过这些优化，可以让表格过滤功能更加贴合实际使用场景，提升用户的使用体验。jQuery 的简洁语法让这些功能的实现变得非常高效，即使是前端新手也可以快速上手掌握。