Js 实现表格隔行换色一例
作者:bea
<!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
<!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>欢迎你</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>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 两个select之间option的互相添加操作(jquery实现)
- XHTML下,JS浮动代码失效的问题
- 把html页面的部分内容保存成新的html文件的jquery代码
- Javascript 定时器调用传递参数的方法
- Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
- JS解析XML的实现代码
- 跨域表单提交状态的变相判断代码
- JS 中document.URL 和 windows.location.href 的区别
- ASP中进行HTML数据及JS数据编码函数
- javascript 日期常用的方法
- Jquery在IE7下无法使用 $.ajax解决方法
- jQuery 白痴级入门教程
- Javascript 解疑
- 不一样的文字闪烁 轮番闪烁
- JS旋转的彩色文字轮转特效
- 文字来回上下移动或跳动的代码
- jquery 输入框数字限制插件
- 通过隐藏option实现select的联动效果
- javascript实现的鼠标悬停时动态翻滚的导航条