<script src="jQuery/jquery-1.3.1.js" language="javascript"></script>
<script type="text/javascript">
$(function(){
$("#filterVal").keyup(function(){
$("#test tr").hide().filter(":contains('"+( $("#filterVal").val() )+"')").show();
}).keyup();
})
</script>
<TABLE width="100%" id="test2"
style="cellpadding: 2px; cellspacing: 0px; margin-top: 0px; margin-Left: 0px"
style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word" border="1" bordercolor="#006633">
<font color="#ff00ff" size="3">筛选:</font><input type="text" id="filterVal" /><br>
<thead>
<tr align="center">
<TD style="color:#4c4743;line-height:160%;" width="20%"><font color="#ff00ff" size="3">姓名</font></TD>
<TD style="color:#4c4743;line-height:160%;" width="10%"><font color="#ff00ff" size="3">性别</font></TD>
<TD style="color:#4c4743;line-height:160%;" width="30%"><font color="#ff00ff" size="3">电话</font></TD>
<TD style="color:#4c4743;line-height:160%;" width="30%"><font color="#ff00ff" size="3">手机</font></TD>
<TD style="color:#4c4743;line-height:160%;" width="10%"><font color="#ff00ff" size="3">操作</font></TD>
</tr>
</thead>
<tbody id="test">
<TR align="center" id="test1">
<TD style="color:#4c4743;line-height:160%;" width="20%">北京中心</TD>
<TD style="color:#4c4743;line-height:160%;" width="10%">男
</TD>
<TD style="color:#4c4743;line-height:160%;" width="30%">010-88888888
</TD>
<TD style="color:#4c4743;line-height:160%;" width="30%">13988888888</TD>
<TD style="color:#4c4743;line-height:160%;" width="10%"><a
href="DeleteServlet?id=1">删除</a></TD>
</TR>
<TR align="center" id="test1">
<TD style="color:#4c4743;line-height:160%;" width="20%">上海中心</TD>
<TD style="color:#4c4743;line-height:160%;" width="10%">女
</TD>
<TD style="color:#4c4743;line-height:160%;" width="30%">010-66666666
</TD>
<TD style="color:#4c4743;line-height:160%;" width="30%">13666666666</TD>
<TD style="color:#4c4743;line-height:160%;" width="10%"><a
href="DeleteServlet?id=2">删除</a></TD>
</TR>
<TR align="center" id="test1">
<TD style="color:#4c4743;line-height:160%;" width="20%"> 波波</TD>
<TD style="color:#4c4743;line-height:160%;" width="10%">男
</TD>
<TD style="color:#4c4743;line-height:160%;" width="30%">12345678
</TD>
<TD style="color:#4c4743;line-height:160%;" width="30%">12345678901</TD>
<TD style="color:#4c4743;line-height:160%;" width="10%"><a
href="DeleteServlet?id=8">删除</a></TD>
</TR>
</tbody>
</TABLE>
实现思路:
当文本框输入值的时候调用函数,先把所有的值隐藏,也就是上面的hide() 然后将包含文本框里面值contains('"+( $("#filterVal").val() )的信息过滤出来并显示filter(value).show();