jquery实现静态页面筛选表格
更新:HHH   时间:2023-1-7


用jquery做一个筛选信息的效果。首先要加入对jquery的支持,这个自己加即可

jsp页面:

筛选:<input type="text" id="shai"/>

<table>

   <thead><tr><td>姓名</td><td>性别</td><td>年龄</td><td>生日</td></tr></thead>

   <tbody>

        <tr><td>张三</td><td>男</td><td>15</td><td>1999</td></tr>

        <tr><td>李四</td><td>男</td><td>18</td><td>1999</td></tr>

        <tr><td>王五</td><td>男</td><td>15</td><td>1999</td></tr>

   </tbody>

</table>

js代码:

<script>

   $(document).ready(function(){

       $("#shai").keyup(function(){

           $("table tbody tr").hide().filter(":contains('"+($(this).val())+"')").show();

       });keyup();//这句一定要有。

   })

</script>

效果:

当在输入框输入“张”或者表格中任意一个字时,会将该行筛选出来。

返回web开发教程...