jQuery实现页面搜索

最新推荐文章于 2022-12-22 13:51:44 发布

weixin_30496751

最新推荐文章于 2022-12-22 13:51:44 发布

阅读量106

点赞数

原文链接：http://www.cnblogs.com/zhangzhaoyang/p/7791550.html

版权

jQuery实现页面搜索，搜索筛选用户输入的内容！

filter()实现内容筛选

HTML:

<div class="table">
        <table>
            <tr id="theader">
            <th>姓名</th>
            <th>性别</th>
            <th>联系方式</th>
        </tr>
        <tr>
            <td>客服</td>
            <td>女</td>
            <td>161654466</td>
        </tr>
        <tr>
            <td>掌柜</td>
            <td>男</td>
            <td>37398378737</td>
        </tr>
        <tr>
            <td>小二</td>
            <td>男</td>
            <td>37398378737</td>
        </tr>
        <tr>
            <td>小三</td>
            <td>女</td>
            <td>3464653537</td>
        </tr>
        <tr>
            <td>小四</td>
            <td>女</td>
            <td>37398378737</td>
        </tr>
        </table>
        <input type="text"></input>
        <input type="button" value="搜索"></input>

    </div>

JQ:

$(function(){
        $("input[type=button]").click(function(){
            var txt=$("input[type=text]").val();
            if($.trim(txt)!=""){

                $("table tr:not('#theader')").hide().filter(":contains('"+txt+"')").show().css("background","red");
            }else{
                $("table tr:not('#theader')").css("background","#fff").show();
            }
        });
    })

转载于:https://www.cnblogs.com/zhangzhaoyang/p/7791550.html