DOM案例之———–隔行變色、鼠標移動變色 – Javascript教程_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>隔行變色</title>
<style>
 .top{
  background-color:#FF9900;
  color: #00F}
 table{
  border:1px #F0F dashed;
  border-collapse:collapse;
  }
 td,th{
  border:#999 1px solid;}
 .one{
  background-color:#FFC;
  }
 .two{
  background-color:#FCC}
 .over{
  background-color:#C90;}
</style>
<script>
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;
   //重新設定新的顏色
   this.className="over";
  }
 
  trlist[i].onmouseout=function (){
  
   //當鼠標離開,自動還原改行的顏色
   this.className=oldcolor;
  }
 
 }
 
 
}

//當鼠標移動上來的時候,改變當前行的顏色
  var color="";
function over(trNode){
 //把原來的顏色,先另存一下
 color=trNode.className;
 //將當前行的顏色設定為over
 trNode.className="over";
}
//當鼠標移動離開的時候,我們原來的行的顏色設定回來
function out(trNode){
 //還原以前的顏色
 trNode.className=color;
}
</script>
</head>
 
 
 
 
 
<body onload="geHang()">
<table width="500" height="200" border="0">
  <tr class="top">
    <th>姓名</th>
    <th>性別</th>
    <th>年齡</th>
    <th>籍貫</th>
    <th>電話</th>
    <th>郵箱</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

摘自 劉海闖的專欄

發佈留言