实现隔行变色与当鼠标移动上去时自动变色

101 阅读 0 评论 67 点赞

我是靠谱客的博主高大玉米，最近开发中收集的这篇文章主要介绍实现隔行变色与当鼠标移动上去时自动变色，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.top{
background-color:#F00;
color:#006;
}
table{
border:1px #C06 dashed;
border-collapse:collapse;
}
th,td{
border:#999 1px solid;

}
.one{
background-color:#ffc;
}
.two{
background-color:#fcc;
}
.over{
background-color:#666;
}
</style>

<script language="javascript" type="application/javascript">
function geHang(){
//获取所有的tr
var trlist=document.getElementsByTagName("tr");
for(var i=1;i<trlist.length;i++){

//进行遍历，并且判断
if(i%2==0){
trlist[i].className="two";
}else{
trlist[i].className="one";
}




var oldcolor;
//实现当鼠标移动到该行，该行背景加深、
trlist[i].οnmοuseοver=function(){
oldcolor=this.className;
//onmouseover会传匿名函数 this--将鼠标移上去会获取当前值
//重新设置新颜色
this.className="over";
}
trlist[i].οnmοuseοut=function(){
//当鼠标离开，自动还原颜色

this.className=oldcolor;
}




}
}

/*
//当鼠标移动上来时候，改变当前颜色
function over(trNode){
//把原来的颜色，另存一下
color=trNode.className;
//将当前行的颜色设over定为
trNode.className="over";
}
//当鼠标移动开时候，把原来的行的颜色设定回来
function out(trNode){
//还原以前的颜色
trNode.className=color;
}*/
</script>
</head>

<body οnlοad="geHang()">

<table>
<tr class="top">
<th>姓名</th>
<th>年龄</th>
<th>籍贯</th>
<th>电话</th>
<th>邮编</th>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)">

<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)">

<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

</body>
</html>