js 隔行变色与鼠标悬停自动变色的实现代码

发布时间:2020-09-02编辑:脚本学堂
如何用js实现隔行变色,以及当鼠标移动到某块区域时自动变色的功能?本文分享一段实现此功能的js代码,希望对大家有所帮助。

一段js效果,实现隔行变色与鼠标移动到某区域时自动变色。
代码 如下:

<!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>隔行变色--www.jb200.com</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].onmouseover=function(){
  oldcolor=this.className;
  //onmouseover会传匿名函数 this--将鼠标移上去会获取当前值
  //重新设置新颜色
this.className="over";  
  }
   trlist[i].onmouseout=function(){
  //当鼠标离开,自动还原颜色
this.className=oldcolor;   
}  
}
}
/*
 //当鼠标移动上来时候,改变当前颜色
 function over(trNode){
 //把原来的颜色,另存一下
color=trNode.className;
 //将当前行的颜色设over定为
trNode.className="over";
}
   //当鼠标移动开时候,把原来的行的颜色设定回来
 function out(trNode){
//还原以前的颜色
trNode.className=color;
}*/
</script>
</head>
<body onload="geHang()">
<table>
  <tr class="top">
    <th>姓名</th>
    <th>年龄</th>
    <th>籍贯</th>
    <th>电话</th>
    <th>邮编</th>
  </tr>
  <tr onmouseover="over(this)" onmouseout="out(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onmouseover="over(this)" onmouseout="out(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onmouseover="over(this)" onmouseout="out(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr onmouseover="over(this)" onmouseout="out(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
   <tr onmouseover="over(this)" onmouseout="out(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html> 

您可能感兴趣的文章:
js 隔行变色的最简单代码
js 隔行变色 鼠标经过变色的代码
JS控制表格隔行变色的实现代码
js+css 控制表格隔行变色与单行高亮的代码
Js与Css结合实现表格隔行换色(隔行变色)的代码
Js表格隔行换色(隔行变色)代码一例
Js实现表格隔行变色,鼠标经过时高亮显示的代码
javascript实现隔行变色函数代码一例
表格隔行变色的js实现代码