为了账号安全,请及时绑定邮箱和手机立即绑定

jquery实现静态页面筛选表格

标签:
JQuery

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

效果:

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

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消