jQuery无刷新筛选页面数据

 <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();