如何實現對表格數據內容的快速篩選和查找呢?
jquery中的filter和contains共同使用可以快速實現了這個功能。
如下html代碼:
<div class="wrapper" style="width:300px;margin:50px auto">
<label>篩選</label>
<input type="text" id="searchbox" style="width:257px"/>
<div class="margin" style="margin-top:10px;"></div>
<table border="1" cellspacing="0">
<thead>
<tr><td>姓名</td><td>性別</td><td>暫住地</td></tr>
</thead>
<tbody>
<tr><td>張山</td><td>男</td><td>湖北</td></tr>
<tr><td>abd</td><td>女</td><td>湖南</td></tr>
<tr><td>王麻子</td><td>男</td><td>河北</td></tr>
<tr><td>李四</td><td>男</td><td>河南</td></tr>
<tr><td>王五11</td><td>女</td><td>江蘇</td></tr>
<tr><td>趙六d</td><td>男</td><td>江西</td></tr>
</tbody>
</table>
</div>
可以實現如下簡單的搜索框和表格界面:
表格和搜索框.png
需要實現在搜索框中輸入內容,然后對表格內容篩選刪除搜索框內容時,所有表格數據還原顯示。jquery代碼如下:
<script>
$(function () {
$("#searchbox").keyup(function () {
$("table tbody tr").hide()
.filter(":contains('"+($(this).val())+"')").show();//filter和contains共同來實現了這個功能。
}).keyup();
});
</script>
輸入'男'.png