温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jquery实现静态页面筛选表格

发布时间:2020-04-11 13:24:28 来源:网络 阅读:1254 作者:lgdzxt 栏目:web开发

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

效果:

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI