jQuery是一種廣泛使用的JavaScript庫,它可以幫助開發人員輕松地處理HTML文檔、處理事件、創建動畫效果、處理AJAX等任務。表格是Web開發中的常見元素,而多條件篩選是表格功能的一個重要組成部分。本文將介紹如何使用jQuery實現表格多條件篩選。
$(document).ready(function(){
$("#searchButton").click(function(){
var name = $("#nameInput").val().toLowerCase();
var gender = $('input[name="genderCheckbox"]:checked').val();
var city = $("#citySelect").val();
$("table tbody tr").filter(function() {
var nameMatch = $(this).find("td:eq(0)").text().toLowerCase().indexOf(name) > -1;
var genderMatch = (gender === undefined) || $(this).find("td:eq(1)").text().toLowerCase() == gender;
var cityMatch = (city === "") || $(this).find("td:eq(2)").text() == city;
return nameMatch && genderMatch && cityMatch;
}).show();
$("table tbody tr").filter(function() {
var nameMatch = $(this).find("td:eq(0)").text().toLowerCase().indexOf(name) > -1;
var genderMatch = (gender === undefined) || $(this).find("td:eq(1)").text().toLowerCase() == gender;
var cityMatch = (city === "") || $(this).find("td:eq(2)").text() == city;
return !(nameMatch && genderMatch && cityMatch);
}).hide();
});
});
以上代碼實現了在表格中進行多條件篩選,代碼中使用了jQuery中的filter()方法和eq()方法來快速篩選和定位表格中的元素,代碼采用了鏈式編程方法,簡潔而高效。
表格多條件篩選是Web開發中常見的需求,使用jQuery可以輕松實現這一功能,提升用戶體驗,提高網站的易用性。