隔行变色

最新推荐文章于 2018-03-10 12:09:00 发布

lx258963

最新推荐文章于 2018-03-10 12:09:00 发布

阅读量67

点赞数

分类专栏： Jquery 文章标签： JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/lx258963/article/details/83908533

版权

Jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏


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