隔行换色（2）详解编程语言

!DOCTYPE html
html
head
meta charset= utf-8 /
meta name= keywords content= /
meta name= description content= /
title 隔行换色-JS /title
style type= text/css
*{ margin:0; padding:0;}
body{ width:1000px; height:auto; margin:0 auto; background:#ccc; font-size:16px; font-family: Arial,Microsoft YaHei,SimHei; }

.box{height:auto; overflow:hidden; margin-top:20%;}
.box table{width:100%; height:auto; overflow:inherit; border:solid #fff; border-width:1px 1px 1px 0px;}
.box table td{border:solid #fff; border-width:1px 0px 0px 1px;}
.box table th{border:solid #fff; border-width:0px 0px 0px 1px;}
.box table tr td{ text-align:center; line-height:30px; }
/style
/head
body onload= SetTableColor()

div > table id= tblMain cellpadding= 0 cellspacing= 0
th 姓名 /th
th 性别 /th
th 年龄 /th
th 民族 /th
th 学籍 /th
th 职位 /th
th 学历 /th
tr
td 张飞 /td
td 男 /td
td 45 /td
td 汉族 /td
td 初级 /td
td 打手 /td
td 小学 /td
/tr
tr
td 夏侯渊 /td
td 男 /td
td 35 /td
td 藏族 /td
td 中级 /td
td 将领 /td
td 高中 /td
/tr
tr
td 关羽 /td
td 女 /td
td 43 /td
td 汉族 /td
td 初级 /td
td 前锋 /td
td 三本 /td
/tr
tr
td 诸葛 /td
td 男 /td
td 65 /td
td 彝族 /td
td 高级 /td
td 大师 /td
td 一本 /td
/tr
tr
td 詹姆斯 /td
td 男 /td
td 35 /td
td 彝族 /td
td 大前锋 /td
td 大师 /td
td 三本 /td
/tr
tr
td JR.史密斯 /td
td 男 /td
td 23 /td
td 彝族 /td
td 高级 /td
td 大师 /td
td 一本 /td
/tr
tr
td 张飞 /td
td 男 /td
td 45 /td
td 汉族 /td
td 初级 /td
td 打手 /td
td 小学 /td
/tr
tr
td 夏侯渊 /td
td 男 /td
td 35 /td
td 藏族 /td
td 中级 /td
td 将领 /td
td 高中 /td
/tr
tr
td 关羽 /td
td 女 /td
td 43 /td
td 汉族 /td
td 初级 /td
td 前锋 /td
td 三本 /td
/tr
tr
td 诸葛 /td
td 男 /td
td 65 /td
td 彝族 /td
td 高级 /td
td 大师 /td
td 一本 /td
/tr
tr
td 詹姆斯 /td
td 男 /td
td 35 /td
td 彝族 /td
td 大前锋 /td
td 大师 /td
td 三本 /td
/tr
tr
td JR.史密斯 /td
td 男 /td
td 23 /td
td 彝族 /td
td 高级 /td
td 大师 /td
td 一本 /td
/tr
/table

/div
script type= text/javascript

function SetTableColor(){
var tbl = document.getElementById( tblMain );
var trs = tbl.getElementsByTagName( tr );
for(var i = 0; i trs.length; i++){
var j = i + 1;
if (j % 2 == 0){ //偶数行
trs[i].style.background = #D9EDE1

}else{
trs[i].style.background = #ADD9C2
}
}
}

/script
/body
/html

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/17358.html