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

Posted by 小寒 at 14:45:50 | 代码片段 | 1人发表了评论

<!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/

博主：小寒
链接： http://blog.mujj.net

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

发表评论

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

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

相关文章

最新评论及回复

发表评论

分类

评论

搜索