Js与Css结合实现表格隔行换色(隔行变色)的代码

发布时间:2020-08-29编辑:脚本学堂
介绍一个Js与Css结合实现的表格隔行换色的代码,有需要的朋友,可以参考下,希望对您有所帮助。

1、html+CSS代码
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>隔行换色-www.jb200.com</title> 
<style type="text/css" media="all"> 
body{  
margin:16px;  
padding:0px;  
font-size:12px;  
background-color:#633801;  
}  
table{  
background-color:#FFDFB5;  
width:560px;  
margin:0px auto;  
color:#FFF2BC;  
text-align:center;  
line-height:28px;  
font-size:12px;  
}  
.table_label{  
width:560px;  
margin:0px auto;  
}  
.table_label div{  
width:160px;  
background-color:#BF6B00;  
border-left:#FFDFB5 1px solid;  
border-top:#FFDFB5 1px solid;  
border-right:#FFDFB5 1px solid;  
color:#FFEEC9;  
line-height:28px;  
text-align:center;  
}  
td{  
width:180px;  
font-family:Arial, Helvetica, sans-serif,"宋体";  
}  
</style> 
<script language="javascript" type="text/javascript"> 
window.onload=function(){var tr=document.getElementsByTagName("tr"),c="#986A2E",c2;for(var j=0;j<tr.length;j++){if(j>0&&(j/2+"a").length>2){c="#885A1F"}else if(j==0){c="#5B3300";tr[j].style.fontWeight="bold"}else{c="#986A2E"}tr[j].style.backgroundColor=c;tr[j].onmouseover=function(){c2=this.style.backgroundColor;this.style.backgroundColor="#BF6B00";};tr[j].onmouseout=function(){this.style.backgroundColor=c2;};}}  
</script> 
</head>
<body> 
<div class="table_label"><div>最近一个月获得的奖励</div></div> 
<table cellspacing="1" cellpadding="0"> 
<tr> 
<td>日期</td> 
<td>获得奖励</td> 
<td>数量</td> 
</tr> 
<tr> 
<td>2008-10-29</td> 
<td>50元兑奖券</td> 
<td>10个</td> 
</tr> 
<tr> 
<td>2008-10-29</td> 
<td>50元兑奖券</td> 
<td>10个</td> 
</tr> 
<tr> 
<td>2008-10-29</td> 
<td>50元兑奖券</td> 
<td>10个</td> 
</tr> 
<tr> 
<td>2008-10-29</td> 
<td>50元兑奖券</td> 
<td>10个</td> 
</tr> 
<tr> 
<td>2008-10-29</td> 
<td>50元兑奖券</td> 
<td>10个</td> 
  </tr> 
  <tr> 
<td>2008-10-29</td> 
<td>50元兑奖券</td> 
<td>10个</td> 
  </tr> 
  <tr> 
<td>2008-10-29</td> 
<td>50元兑奖券</td> 
<td>10个</td> 
  </tr> 
  <tr> 
<td>2008-10-29</td> 
<td>50元兑奖券</td> 
<td>10个</td> 
  </tr> 
  <tr> 
<td>2008-10-29</td> 
<td>50元兑奖券</td> 
<td>10个</td> 
  </tr> 
</table> 
</body> 
</html>

2、js代码
 

<script language="javascript" type="text/javascript"> 
window.onload=function(){  
var tr=document.getElementsByTagName("tr"),c="#986A2E",c2;  
for(var j=0;j<tr.length;j++){  
if(j>0&&(j/2+"a").length>2){c="#885A1F"}  
else if(j==0){c="#5B3300";tr[j].style.fontWeight="bold"}  
else{c="#986A2E"}tr[j].style.backgroundColor=c;  
tr[j].onmouseover=function(){c2=this.style.backgroundColor;this.style.backgroundColor="#BF6B00";};
tr[j].onmouseout=function(){this.style.backgroundColor=c2;};  
}  
}  
</script> 


效果图如下所示:
表格隔行换色
 

您可能感兴趣的文章:
js 隔行变色的最简单代码
js 隔行变色 鼠标经过变色的代码
JS控制表格隔行变色的实现代码
js 隔行变色与鼠标悬停自动变色的实现代码
js+css 控制表格隔行变色与单行高亮的代码
Js表格隔行换色(隔行变色)代码一例
Js实现表格隔行变色,鼠标经过时高亮显示的代码
javascript实现隔行变色函数代码一例
表格隔行变色的js实现代码