滑鼠懸浮tr行高亮變色

admin發表於2018-09-13

為提高表格的人性化程度，很多網站這樣類似效果，當滑鼠懸浮行的時候，能夠讓當前行出現高亮效果，滑鼠移開，表格行恢復帶原來的顏色，下面通過程式碼例項介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>table細線表格-螞蟻部落</title> 
<style type="text/css">  
#thetable{ 
  background-color:green; 
  font-size:12px; 
} 
#thetable th{ 
  text-align:center; 
  background-color:#CCF; 
  height:30px; 
  line-height:30px; 
} 
#thetable td{ 
  width:150px; 
  height:30px; 
  line-height:30px; 
  text-align:center; 
  background-color:#FFF; 
}
#thetable .hover td{
  background-color:#CCC;
} 
</style>  
<script type="text/javascript">
window.onload=function(){
  var otable=document.getElementById("thetable");
  var otr=otable.getElementsByTagName("tr");
  for(var index=1;index<otr.length;index++){
    otr[index].onmouseover=function(){
      this.className="hover";
    }
    otr[index].onmouseout=function(){
      this.className="";
    }
  }
}
</script>
</head>  
<body>  
<table cellpadding="0" cellspacing="1" id="thetable"> 
  <tr> 
    <th>標題一</th> 
    <th>標題二</th> 
    <th>標題三</th> 
    <th>標題四</th> 
  </tr> 
  <tr> 
    <td>螞蟻部落一</td> 
    <td>螞蟻部落二</td> 
    <td>螞蟻部落三</td> 
    <td>螞蟻部落四</td> 
  </tr> 
  <tr> 
    <td>螞蟻部落一</td> 
    <td>螞蟻部落二</td> 
    <td>螞蟻部落三</td> 
    <td>螞蟻部落四</td> 
  </tr> 
  <tr> 
    <td>螞蟻部落一</td> 
    <td>螞蟻部落二</td> 
    <td>螞蟻部落三</td> 
    <td>螞蟻部落四</td> 
  </tr> 
</table> 
</body>  
</html>

上面的程式碼實現滑鼠懸浮，當前tr行背景變色效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var otable=document.getElementById("thetable")，獲取表格物件。

（3）.var otr=otable.getElementsByTagName("tr")，獲取tr元素集合。

（4）.for(var index=1;index<otr.length;index++)，通過for迴圈的方式註冊事件處理函式。

（5）.otr[index].onmouseover=function(){

  this.className="hover";

}，註冊mouseover事件處理函式，當滑鼠懸浮，能夠為當前tr新增class屬性，值為hover。

（6）.otr[index].onmouseout=function(){

  this.className="";

}，將class屬性值清空。

二.相關閱讀:

（1）.getElementsByTagName()參閱document.getElementsByTagName()一章節。

（2）.mouseover事件參閱JavaScript mouseover 事件一章節。

（3）.className屬性參閱JavaScript className一章節。

相關文章