Js表格隔行换色(隔行变色)代码一例
发布时间：2014-10-08 编辑：jiaochengji.com
js代码实现表格的隔行换色，或叫隔行变色，有需要的朋友，可以参考下。
代码如下：
<!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>Js实现表格隔行变色-www.jbxue.com</title>
<style type="text/css">
body{ padding:0; margin:0; font:Arial; font-size:12px;}
.bf{ padding:0; margin:auto;}
.bf table{ text-align:center;line-height:14pt;}
.bf th{ width:50px; padding:10px;}
.f1{ background:#fff8f0;}
.f2{ background:#f0f7ff;}
.f3{ background:#f7f7f7;}
</style>
</head>
<body>
<div class="bf">
<table border="1" bordercolor="#00CCFF" cellspacing="0" >
<caption>脚本学堂_www.jbxue.com</caption>
<tr class="b">
<th></th>
<th scope="col">2006年</th>
<th scope="col">2007年</th>
<th scope="col">2008年</th>
<th scope="col">2009年</th>
</tr>
<tr class="b"><th scope="row" rowspan="4">总</th></tr>
<tr>
<td>4</td>
<td>2</td>
<td>56</td>
<td>43</td>
</tr>
<tr>
<td>10</td>
<td>4</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>10</td>
<td>76</td>
<td>10</td>
<td>9</td>
</tr>
<tr class="b"><th scope="row" rowspan="4">总</th></tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>10</td>
<td>12</td>
<td>10</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>10</td>
<td>10</td>
</tr>
<tr class="b"><th scope="row" rowspan="4">总</th></tr>
<tr>
<td>10</td>
<td>5</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>10</td>
<td>7</td>
<td>10</td>
<td>3</td>
</tr>
<tr>
<td>10</td>
<td>5</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</div>
<script type="text/javascript">
var bg=document.getElementsByTagName('tr');
for(var i=0,j=0;i<bg.length;i++)
{
if(bg[i].className!='b')
{ j++;
bg[i].className=j%2==0?'f1':'f2';
}
else
{bg[i].className='f3'}
}
</script>
</body>
</html>
您可能感兴趣的文章：
js 隔行变色的最简单代码
js 隔行变色 鼠标经过变色的代码
JS控制表格隔行变色的实现代码
js 隔行变色与鼠标悬停自动变色的实现代码
js+css 控制表格隔行变色与单行高亮的代码
Js与Css结合实现表格隔行换色(隔行变色)的代码
Js实现表格隔行变色，鼠标经过时高亮显示的代码
javascript实现隔行变色函数代码一例
表格隔行变色的js实现代码
您可能感兴趣的文章：
javascript实现隔行变色函数代码一例
jQuery 表格隔行换色 鼠标高亮行变色的实现代码
JS控制表格隔行变色的实现代码
js 隔行变色的最简单代码
js 隔行变色与鼠标悬停自动变色的实现代码
js 隔行变色 鼠标经过变色的代码
Js表格隔行换色(隔行变色)代码一例
JQuery实现表格隔行换色(隔行变色)效果代码一例
Js与Css结合实现表格隔行换色(隔行变色)的代码
jQuery 行背景颜色的交替显示(隔行变色)实现代码
[关闭]