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

最新推荐文章于 2021-08-19 16:36:26 发布

阿顿

最新推荐文章于 2021-08-19 16:36:26 发布

阅读量1.8k

点赞数

文章标签： function border xhtml javascript table class

本文链接：https://blog.csdn.net/dunyanan1/article/details/7307786

版权

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