如何实现对表格数据内容的快速筛选和查找呢?
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>
可以实现如下简单的搜索框和表格界面:
需要实现在搜索框中输入内容,然后对表格内容筛选删除搜索框内容时,所有表格数据还原显示。jquery代码如下:
<script>
$(function () {
$("#searchbox").keyup(function () {
$("table tbody tr").hide()
.filter(":contains('"+($(this).val())+"')").show();//filter和contains共同来实现了这个功能。
}).keyup();
});
</script>