Js实现表格隔行换色一例
Js实现表格隔行换色一例，这种效果网上已经有很多啦，每一种都有特色，请大家选择使用。
当前位置：编程学习 > 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实现表格隔行换色一例</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>2006～2009年度资产统计表</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疑问解答：
- 几个验证11位手机号码格式的js代码
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。
- JS怎样操作PHP中的参数
- js 怎么在一打开页面就加载这个函数。
- Date.parse()的问题(js)
- <script src="/{maxcms:sitepath}js/common.js"></script>是什么意思