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

来源：互联网发布：淘宝云客服在线投诉网编辑：程序博客网时间：2024/06/05 03:35
<!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>
效果图显示：
这里写图片描述
0 0