表格隔行换色+鼠标经过变色(ie6,ie7,ff)-相忘于江湖

<!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>test</title>
<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>
</head>
<body id="" class="">
<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>
</body>
</html>

jq版的：http://rlog.cn/lab/StripingTable/

相忘于江湖

相濡以沫,不如相忘于江湖

导航

表格隔行换色+鼠标经过变色(ie6,ie7,ff)

2009-4-20 14:45:50 发布:小寒 | 分类:代码片段 | 评论:1 | 引用:0 | 浏览:

Tags: 表格 隔行变色 鼠标经过变色

1楼 aleaf 回复该留言

2009-4-21 12:55:35

小寒

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Walle Build 100427

相忘于江湖

相濡以沫,不如相忘于江湖

导航

表格隔行换色+鼠标经过变色(ie6,ie7,ff)

2009-4-20 14:45:50 发布:小寒 | 分类:代码片段 | 评论:1 | 引用:0 | 浏览: strBatchCount+="spn237=237,"

Tags: 表格 隔行变色 鼠标经过变色

1楼 aleaf 回复该留言

2009-4-21 12:55:35

小寒

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Walle Build 100427

2009-4-20 14:45:50 发布:小寒 | 分类:代码片段 | 评论:1 | 引用:0 | 浏览:

Tags: 表格隔行变色鼠标经过变色