jQuery表格是一個非常好用的工具,既可以展示數據,也可以通過條件選擇來篩選數據。下面我來介紹一下如何使用jQuery表格進行條件選擇。
//HTML代碼 <table id="myTable"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>職業</th> </tr> </thead> <tbody> <tr> <td>張三</td> <td>28</td> <td>男</td> <td>工程師</td> </tr> <tr> <td>李四</td> <td>35</td> <td>男</td> <td>醫生</td> </tr> <tr> <td>王五</td> <td>23</td> <td>女</td> <td>教師</td> </tr> </tbody> </table> //JavaScript代碼 $(document).ready(function() { //表格初始化 $("#myTable").DataTable(); //條件選擇 $("select").change(function() { var nameVal = $("#name option:selected").val(); var ageVal = $("#age option:selected").val(); var genderVal = $("#gender option:selected").val(); //過濾條件 var filter = ""; if (nameVal != "") { filter += "[data-name='" + nameVal + "']"; } if (ageVal != "") { filter += "[data-age='" + ageVal + "']"; } if (genderVal != "") { filter += "[data-gender='" + genderVal + "']"; } //表格過濾 $("#myTable tbody tr").hide(); $("#myTable tbody tr" + filter).show(); }); });
在這個例子中,我們通過三個下拉框來選擇過濾條件。對應的JavaScript代碼會根據選擇的條件構建一個過濾條件,然后通過表格的API來進行過濾。這樣用戶就可以根據自己的需要來選擇要顯示的數據了。
上一篇div href 使用