js搜索高亮

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jquery测试的</title>
    <style type="text/css">
        #table{
            border: 1px solid #0066cc;
            border-collapse: collapse;
            width: 600px;
        }
        tr{
            height: 30px;
        }
        th{
            border: 1px solid #0066cc;
        }
        td{
            border: 1px solid #0066cc;
            text-align: center;

        }
        a{
            text-decoration: none;
            margin-left: 10px;
        }
        .popdiv{
            width: 500px;
            border: 1px solid #cccccc;
            position: absolute;
            left: 50%;
            margin-left: -520px;
            top: 100px;
            background: white;
            padding: 10px;
            display:none;
            z-index:4;
        }
        .popdiv p{
            border-bottom: 1px solid slateblue;
        }
        .input{
            margin: 10px;
            width: 400px;
            height: 40px;
            font-size: 20px;
        }
        .input .in{
            width: 220px;
            height: 30px;
        }
        .input .btn{
            font-size: 14px;
            padding: 8px 30px;
        }
    </style>
    <script src=" http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script>

</head>
<body>
    <div class="input">
        <input type="text" value="" placeholder='请输入任意相关信息' class="in">
        <input type="button" value="重新搜索" class="btn">
    </div>

    <table id="table">
        <tr id="t">
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
            <th>工资</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>28</td>
            <td>java工程师</td>
            <td>8000</td>
            <td><a href="#" class="view">查看</a><a href="#">修改</a><a href="#" class="del">删除</a></td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>前端工程师</td>
            <td>10000</td>
            <td><a href="#" class="view">查看</a><a href="#">修改</a><a href="#" class="del">删除</a></td>
        </tr>
        <tr>
            <td>成龙</td>
            <td>60</td>
            <td>演员</td>
            <td>100000</td>
            <td><a href="#" class="view">查看</a><a href="#">修改</a><a href="#" class="del">删除</a></td>
        </tr>
    </table>
    <!--查看详细的div-->
    <div class="popdiv">
        <p><strong>姓名:</strong><span></span></p>
        <p><strong>年龄：</strong><span></span></p>
        <p><strong>职业</strong><span></span></p>
        <p><strong>月薪</strong><span></span></p>
        <a href="#" class="close">关闭</a>
    </div>
    <script>

            $('.view').click(function(){
                //添加一个遮罩层；
                var makeHeight=$(document).height();
                var makeWidth=$(document).width();
                $('<div class="make"></div>').appendTo($('body'));
                $('div.make').css({
                    "background":"#000000",
                    "opacity":0.4,
                    "position":"absolute",
                    "left":0,
                    "top":0,
                    "width":makeWidth,
                    "height":makeHeight,
                    "z-index":2
            });

                var arr=[];
                $(this).parent().siblings().each(function(){
                  arr.push($(this).text());
                })
                $('.popdiv').show().children().each(function(i){
                    $(this).children('span').text(arr[i]);
                });

            });
        //关闭
        $('.close').click(function(){
            $(this).parent().hide();
            $('.make').remove();
        });

        //删除

        $('.del').click(function(){
            $(this).parents('tr').remove();
        });
         //搜索

            $('input[type=text]').keyup(function() {
                var text = $('input[type=text]').val();
                if(text!==''){
                    $("table tr td:contains('"+text+"')").css("color", "red");//高亮当前输入的字符
                    //$("table tr td:contains('"+text+"')").wrap("<span style='color: red'></span>");
                    $('table tr:not(\'#t\')').hide().filter(":contains('" + text + "')").show();
                }else{
                    history.go(0)//刷新当前页的方法
                    location.reload();
                }

            });
            $('input[type=button]').click(function(){
                //刷新当前页面
                history.go(0)
            });
            $(function () {
                $("#btnSearch").click(function () {
                    $("div:contains('simple')").css("border", "4px solid blue");
                });
            });
    </script>
</body>
</html>
猜你喜欢
