jquery表格动态添加及各行变色效果

最新推荐文章于 2022-04-21 23:16:26 发布

酷jjs

最新推荐文章于 2022-04-21 23:16:26 发布

阅读量1.6k

点赞数

分类专栏：前端笔记 jquery 文章标签： jquery 隔行变色

本文链接：https://blog.csdn.net/qq_32584661/article/details/53116934

版权

前端笔记同时被 2 个专栏收录

165 篇文章 2 订阅

订阅专栏

jquery

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格动态添加及各行变色效果</title>
    <script src="js/jquery-1.11.1.js"></script>
    <style type="text/css">


        *{padding: 0;margin: 0;list-style: none;}

        body{ width: 1000px; margin:30px auto;}

        .box-head { background:#009cc3;border-radius: 5px 5px 0px 0px;max-height: 40px;}
        .box-content { background: #eee;border: 1px solid #bbb;border-top: none;
        border-radius: 0 0 3px 3px;padding:10px;}
        .small_ico3{font-size: 16px;color: #ffffff; line-height: 40px; padding-left:10px;}

        .table_ban{ background: url("img/kacha.png") no-repeat center 12px #ffffff;
        overflow: hidden; padding-bottom: 10px;}

        .table_boxl{float:left; margin-left:20px;}
        .table_boxr{float:right;margin-right:20px;}

 color: #ffffff!important; padding-left:38px;
            background: url("img/moredjbg.png") no-repeat; margin:10px 0;}

        .table {border:1px solid #1295b6;border-right-width:0;display:inline-block;}
        .table ul li{float:left;width:180px;text-align:center;
        border-right:1px solid #1295b6;
            cursor:pointer;position:relative;}

        .table ul{clear:both;margin-bottom:0;padding-left:0;}
        .table .lis1{width:70px;}
        .table .tit{line-height:30px;font-weight:bold;background:#8fd3e4;height:30px;}
        .table .tr{border-top:1px solid #1295b6;line-height:28px;height:28px;}


        .col{color:red;font-weight:normal;}

        .linebox{ float: left; background: url("img/lineline.png") repeat-y center; width:46px;
            height:604px; margin:58px 0 0 12px; }

    </style>
</head>
<body>


<div class="box" style="width:100%;">
    <div class="box-head">
        <h2 class="small_ico3">数据表</h2>
    </div>
    <div class="box-content ">

        <div class="table_ban">

            <div class="table_box table_boxl">
                <h5>数据1</h5>
                <div class="table" id="cys_form">
                    <ul class="tit">
                        <li class="lis1">名次</li>
                        <li>企业</li>
                        <li>区域</li>
                    </ul>
                    <!--<ul class="tr">-->
                        <!--<li class="lis1">1</li>-->
                        <!--<li>顺丰 (<strong class="col">98%</strong>)</li>-->
                        <!--<li>顺丰 (<strong class="col">98%</strong>)</li>-->
                    <!--</ul>-->


                </div>
            </div>

            <div class="linebox"></div>

            <div class="table_box table_boxr">
                <h5>数据2</h5>
                <div class="table" id="djl_form">
                    <ul class="tit">
                        <li class="lis1">名次</li>
                        <li>企业</li>
                        <li>区域</li>
                    </ul>
                    <!--<ul class="tr">-->
                        <!--<li class="lis1">1</li>-->
                        <!--<li>顺丰 (<strong class="col">98%</strong>)</li>-->
                        <!--<li>顺丰 (<strong class="col">98%</strong>)</li>-->
                    <!--</ul>-->


                </div>
            </div>



        </div>
    </div>
</div>

<script>
    $(function () {

        var table_cys1=['圆通','申通','天天','德邦','全峰','国通','EMS','百世','韵达','宅急送','速尔','优速','快捷','中国邮政','圆通','国通','EMS','百世','韵达','宅急送'];
        var table_cys2=['100','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200'];
        var table_cys3=['圆通','申通','天天','德邦','全峰','国通','EMS','百世','韵达','宅急送','速尔','优速','快捷','中国邮政','圆通','国通','EMS','百世','韵达','宅急送'];
        var table_cys4=['100','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200','200'];

        var table_djl1=['圆通','申通','天天','德邦','全峰','国通','EMS','百世','韵达','宅急送','速尔','优速','快捷','中国邮政','圆通','国通','EMS','百世','韵达','宅急送'];
        var table_djl2=['98%','98%','98%','98%','98%','98%','98%','200','200','200','200','200','200','200','200','200','200','200','200','200'];
        var table_djl3=['圆通','申通','天天','德邦','全峰','国通','EMS','百世','韵达','宅急送','速尔','优速','快捷','中国邮政','圆通','国通','EMS','百世','韵达','宅急送'];
        var table_djl4=['100','200','98%','200','200','98%','200','200','98%','200','98%','200','200','200','200','200','200','200','200','200'];

        var num=table_cys1.length;


/查验数/

        for(var i=0;i<num;i++){
            var $cystable_ul=$('<ul  class="tr"></ul>');
            var $cystable_li1=$('<li class="lis1">'+(i+1)+'</li>');
            var $cystable_li2=$('<li>'+table_cys1[i]+'(<strong class="col">'+table_cys2[i]+'</strong>)</li>');
            var $cystable_li3=$('<li>'+table_cys3[i]+'(<strong class="col">'+table_cys4[i]+'</strong>)</li>');
            $cystable_ul.append($cystable_li1);
            $cystable_ul.append($cystable_li2);
            $cystable_ul.append($cystable_li3);
            $('#cys_form').append($cystable_ul);
        }
/登记率/

        for(var i=0;i<num;i++){
            var $djltable_ul=$('<ul  class="tr"></ul>');
            var $djltable_li1=$('<li class="lis1">'+(i+1)+'</li>');
            var $djltable_li2=$('<li>'+table_djl1[i]+'(<strong class="col">'+table_djl2[i]+'</strong>)</li>');
            var $djltable_li3=$('<li>'+table_djl3[i]+'(<strong class="col">'+table_djl4[i]+'</strong>)</li>');

            $djltable_ul.append($djltable_li1);
            $djltable_ul.append($djltable_li2);
            $djltable_ul.append($djltable_li3);
            $('#djl_form').append($djltable_ul);

        }

        $('.tr').each(function () {
            var a=$(this).index()%2;
            if(a===0){ $(this).css("background","#e5e5e5")};
            if(a===1){ $(this).css("background","#ffffff")};
        });

        $('.tr').mouseenter(function () {
            $(this).css("background","#b1e1eb");
        })

        $('.tr').mouseleave(function () {
            var a=$(this).index()%2;
            if(a===0){ $(this).css("background","#e5e5e5")};
            if(a===1){ $(this).css("background","#ffffff")};
        })


    })


</script>

</body>