继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jquery实现静态页面筛选表格

英明神武的牛
关注TA
已关注
手记 317
粉丝 30
获赞 175

用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>

效果:

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

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP