jQuery代码 :
<script type="text/javaScript">
$(function(){
$("#filterName").keyup(function(){ //绑定键盘键入事件
$("table tbody tr").hide() // 鼠标键入的时候tr全隐藏
.filter(":contains('"+($(this).val())+"')").show(); // 匹配包含键入的指定文本并显示
}).keyup(); //DOM加载完
});
</script>
html代码:
<p>筛选:<input type="text" id="filterName" /></p>
<table style="width:800px; border:1px solid #ccc">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住证</th>
</tr>
</thead>
<tbody>
<tr class="child_row_01">
<td>张三</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_01">
<td>李四</td>
<td>女</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_01">
<td>王五</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_02">
<td>赵六</td>
<td>女</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_02">
<td>王五</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_02">
<td>赵六</td>
<td>女</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_03">
<td>赵六</td>
<td>女</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_03">
<td>王五</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr class="child_row_03">
<td>赵六</td>
<td>女</td>
<td>浙江宁波</td>
</tr>
</tbody>
</table>