码迷,mamicode.com
首页 > Web开发 > 详细

jquery实现表格的搜索功能

时间:2016-08-27 09:56:44      阅读:327      评论:0      收藏:0      [点我收藏+]

标签:

作者原创,转载请注明出处!

HTML代码如下:

<input type="text" id="txt" value="" />
<input type="button" id="btn" value="搜索" />
<table border="1" cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>电话</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td></td>
            <td>13112345678</td>
        </tr>
        <tr>
            <td>李四</td>
            <td></td>
            <td>1345454548</td>
        </tr>
        <tr>
            <td>王小花</td>
            <td></td>
            <td>1234567890</td>
        </tr>
        <tr>
            <td>笑笑</td>
            <td></td>
            <td>1098909223</td>
        </tr>
    </tbody>
</table>

CSS样式代码如下:

table{
    width: 700px;
    border: 1px solid #008000;
    margin: 10px 0 0 0;
    border-collapse: collapse;/*表格边框合并*/
}
tr{
    height: 30px;
    text-align: center;
}
th,td{
    border: 1px solid #008000;
}

jquery代码如下:(你要先引入jquery的js文件(⊙o⊙)哦)

$(function () {
    $("#btn").click(function () {
        var $sea=$(‘#txt‘).val();
        //先隐藏全部,再把符合筛选条件的值显示
        $(‘table tbody tr‘).hide().filter(‘:contains(‘+$sea+‘)‘).show();
    });
});

未进行筛选的样子

技术分享

 

筛选之后(⊙o⊙)哦

技术分享

未完待续......

你也赶紧运行起来吧!!

jquery实现表格的搜索功能

标签:

原文地址:http://www.cnblogs.com/yuqingfamily/p/5812269.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!