<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格变色</title>
<script type="text/javascript">
<!--
function showtable(tableid){//构建函数showtable
var odd=false;
var tablename=document.getElementById(tableid)
var rows=tablename.getElementsByTagName("tr");
for (var i=1; i<rows.length; i++) {
if (odd==true){
odd=false;
}else{
rows[i].style.backgroundColor="#f1f1f1";
odd=true;
}
rows[i].bgc=rows[i].style.backgroundColor;
rows[i].onmouseover=function(){
this.style.backgroundColor="#ccc";
this.style.color="#f00";
}
rows[i].onmouseout=function(){
this.style.backgroundColor=this.bgc;
this.style.color="#000";
}
}
}
window.onload=function(){
showtable("table");
}
-->
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table">
<thead>
<tr>
<th>流程</th>
<th>启动人</th>
<th>启动时间</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
<tr>
<td><a href="">测试行</a></td>
<td>无</td>
<td>2008-05-09 17:21:04</td>
<td>结束</td>
</tr>
</tbody>
</table>
</body>
</html>
经测试，可以正常使用！~~
分享到：
相关推荐
jquery选取商品隔行变色
隔行变色
表格颜色自动隔行变色
表格隔行变色 表格变色 表格单元格标色，实现方式是奇偶数隔行变色，点击变色！
《Windows界面编程第八篇 listbox彩色显示隔行变色》 http://blog.csdn.net/morewindows/article/details/8656061 配套程序 示范了如何彩色显示listbox控件，并让其隔行变色。 Win32或MFC程序均能使用。
EXCEL版隔行变色！！！！！！！！！！！
实现表格的隔行变色
比较实用的隔行变色的table，带js和复选框，全选反选
资料为HTML重的LI标签技术，实现LI列表的输出，隔行变色，实现鼠标经过变色效果
时间表格的隔行变色，以及鼠标移动到某行 高亮的效果
jQuery动态生成隔行变色的table，使用jQuery+css+json实现
多列列表框上色隔行变色.zip源码Labview个人项目资料程序资源下载多列列表框上色隔行变色.zip源码Labview个人项目资料程序资源下载多列列表框上色隔行变色.zip源码Labview个人项目资料程序资源下载多列列表框上色...
devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置（改变）显示值、固定列不移动（附源码）
列表框插入、隔行变色、嵌入控件.zip源码Labview个人项目资料程序资源下载列表框插入、隔行变色、嵌入控件.zip源码Labview个人项目资料程序资源下载列表框插入、隔行变色、嵌入控件.zip源码Labview个人项目资料程序...
模块内有使用说明，更具说明操作可以使ListView上隔行的颜色改变，以便查看，颜色可以自己设置。
NULL 博文链接：https://cwl123456.iteye.com/blog/1997909
很经典的js特效，上传供大家学习，希望对你们做项目的时候有所帮助。
CSS+JS 实现表格隔行变色 鼠标移动变色
本文简单分析了php简单隔行变色功能实现方法。...echo 隔行变色效果：; echo ; for($i=1;$i<=5;$i++){ if($i%2==0){ $color=yellow; } if($i%2==1){ $color=red; } echo ;\>这是第.$i.行; } echo ; 希望本
这是我自己开发的一个dataGrid分页的控件，上传的资源是一个打成包的flex项目，这个控件在查询数据时是与后台进行实时交互的，表格的表头样式是重写皮肤类进行定义的，而隔行变色是通过css来实现的。其中最重要的...