js實現的表格隔行變色和滑鼠懸浮變色程式碼

螞蟻小編發表於2017-03-16
JS

表格隔行變色和滑鼠懸浮變色是非常常用且實用的程式碼，因為可以增強資料量較多的列表的辨識度，下面就通過程式碼例項介紹一下如何實現此效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#tab{
  text-align:center; 
  width:500px; 
  margin: 200px auto  
}
</style>
<script type="text/javascript">
window.onload=function() {
  var otab=document.getElementById('tab');
  var thiscolor='';
  for(var i=0;i<otab.tBodies[0].rows.length;i++)  {
    otab.tBodies[0].rows[i].onmouseover = function () {
      thiscolor=this.style.background;
      this.style.background='#00FFFF';
    };
    otab.tBodies[0].rows[i].onmouseout=function(){
      this.style.background = thiscolor;
    };
    if(i%2) {
      otab.tBodies[0].rows[i].style.background='';
    }
    else {
      otab.tBodies[0].rows[i].style.background='#FFFF00';
    }
  }
};
</script>
</head>
<body>
<table id="tab" border="1">
  <thead>
    <tr style="background-color:#FF0000">
      <td>螞蟻部落一</td>
      <td>螞蟻部落二</td>
      <td>螞蟻部落三</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>螞蟻部落一</td>
      <td>螞蟻部落二</td>
      <td>螞蟻部落三</td>
    </tr>
    <tr>
      <td>螞蟻部落一</td>
      <td>螞蟻部落二</td>
      <td>螞蟻部落三</td>
    </tr>
    <tr>
      <td>螞蟻部落一</td>
      <td>螞蟻部落二</td>
      <td>螞蟻部落三</td>
    </tr>
    <tr>
      <td>螞蟻部落一</td>
      <td>螞蟻部落二</td>
      <td>螞蟻部落三</td>
    </tr>
  </tbody>
</table>
</body>
</html>

以上程式碼實現了我們的要求，表格中的行可以實現隔行變色和滑鼠懸浮變色效果，下面介紹一下實現過程。

一.程式碼註釋:

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

2.var otab=document.getElementById('tab')，獲取id屬性值為tab的物件，在這裡就是表格。

3.var thiscolor=''，宣告一個變數用來儲存顏色值。

4.for(var i=0;i<otab.tBodies[0].rows.length;i++){}，遍歷tbody中的每一行。

5.otab.tBodies[0].rows.onmouseover=function(){}，為tbody中的行註冊onmouseover事件處理函式。

6.thiscolor=this.style.background，將當前行的背景色存入變數thiscolor。

7.this.style.background='#00FFFF'，將行的背景色設定為'#00FFFF'。

8.otab.tBodies[0].rows.onmouseout=function(){}，為tbody中的行註冊onmouseout事件處理函式。

9.this.style.background=thiscolor，當滑鼠離開的時候將行的背景色設定為原來的顏色。

10.if(i%2){otab.tBodies[0].rows.style.background=''}，將偶數行的背景色設定為空，也就是白色。

二.相關閱讀:

1.onmouseover事件可以參閱javascript  mouseover 事件一章節。 

2.onmouseout事件可以參閱javascript mouseout 事件一章節。

相關文章