您的位置：首页 > Web前端 > JQuery

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

2016-11-10 16:21 489 查看 
<!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;<
4000
span class="hljs-rule">}
.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>


效果图显示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery 隔行变色
相关文章推荐
新的分享
章节导航