jQuery 是一个快速、小巧且功能丰富的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。多条件筛选是指根据多个条件对数据进行过滤和显示的过程。
多条件筛选可以根据不同的需求分为以下几种类型:
多条件筛选广泛应用于各种数据展示和交互场景,如:
以下是一个简单的 jQuery 多条件筛选示例,假设我们有一个表格,根据用户输入的条件进行筛选:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 多条件筛选</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" id="nameFilter" placeholder="筛选姓名">
<input type="text" id="ageFilter" placeholder="筛选年龄">
<table id="dataTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
function filterTable() {
var name = $('#nameFilter').val().toLowerCase();
var age = $('#ageFilter').val();
$('#dataTable tbody tr').each(function() {
var rowName = $(this).find('td:first').text().toLowerCase();
var rowAge = $(this).find('td:last').text();
if ((name === '' || rowName.indexOf(name) > -1) &&
(age === '' || rowAge == age)) {
$(this).show();
} else {
$(this).hide();
}
});
}
$('#nameFilter, #ageFilter').on('input', filterTable);
});
</script>
</body>
</html>
通过以上示例和解释,你应该能够理解并实现一个基本的 jQuery 多条件筛选功能。
领取专属 10元无门槛券
手把手带您无忧上云