zoukankan      html  css  js  c++  java
  • jQuery实现页面搜索

    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();
                }
            });
        })
    

      

  • 相关阅读:
    希尔排序
    折半插入排序
    自学git心得-2
    读书笔记-1 《人月神话》
    USTCCourseCommunity 项目介绍
    自学git心得-1
    HDU 2006 求奇数的乘积
    HDU 2007 平方和与立方和
    HDU 2005 第几天?
    HDU 2004 成绩转换
  • 原文地址:https://www.cnblogs.com/zhangzhaoyang/p/7791550.html
Copyright © 2011-2022 走看看