jquery实现表格的搜索功能

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>
View Code

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;
}
View Code

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

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

未进行筛选的样子

 

筛选之后(⊙o⊙)哦

未完待续......

你也赶紧运行起来吧!!

转载于:https://www.cnblogs.com/yuqingfamily/p/5812269.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值