CSS 表格隔行换色，鼠标经过行变换背景颜色

 表格隔行换色，鼠标经过行变换背景颜色效果代码

<style language="text/css">

/*第一种颜色*/
#table tr.color1{
 background-color:#FFFFFF;
}
/*第二种颜色*/
#table tr.color2{
 background-color:#F8F8F8;
}
</style>
<script type="text/javascript">
<!--
function onloadEvent(func){
 var one=window.onload
 if(typeof window.onload!='function'){
  window.onload=func
 }
 else{
  window.onload=function(){
   one();
   func();
  }
 }
}
function showtable(){
 var tableid='table';  //表格的id
 var overcolor='#FCF9D8'; //鼠标经过颜色
 var color1='#FFFFFF';  //第一种颜色
 var color2='#F8F8F8';  //第二种颜色
 var tablename=document.getElementById(tableid)
 var tr=tablename.getElementsByTagName("tr")
 for(var i=1 ;i<tr.length;i++){
  tr[i].onmouseover=function(){
   this.style.backgroundColor=overcolor;
  }
  tr[i].onmouseout=function(){
   if(this.rowIndex%2==0){
    this.style.backgroundColor=color1;
   }else{
    this.style.backgroundColor=color2;
   }
  }
  if(i%2==0){
   tr[i].className="color1";
  }else{
   tr[i].className="color2";
  }
 }
}
onloadEvent(showtable);
-->
</script>

<table width="100%" border="0" cellspacing="1" cellpadding="4" class="list" name="table" 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>