JavaScript 表格隔行變色效果

admin發表於2019-01-18
JavaScript

本章節分享一段程式碼例項，它實現了table表格行隔行變色效果。

並且滑鼠懸浮和點選行的時候能夠使當前行高亮顯示。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
table{border-collapse:collapse}
table td{
  height:26px;
  font-size:12px;
  color:#333;
  border:1px solid #09c;
  text-align:center;
  padding:0 10px;
}
</style>
</head>
<body>
<script>
window.onload = function(){
  var tables = document.getElementById("tables");
  var tables_li = tables.getElementsByTagName("tr");
  var index=0;
  var len = tables_li.length;
  for(index=0; index<len; index++){
    tables_li[index].onoff = 1;
    tables_li[index].index = index;
    tables_li[index].style.backgroundColor = index%2?"#ace":"";
    tables_li[index].onmouseover = function(){
      if(this.onoff == 1){
        this.style.backgroundColor = "#06c";
      }
    }
    tables_li[index].onmouseout = function(){
      if(this.onoff == 1){
        this.style.backgroundColor = this.index%2?"#ace":"";
      }
    }
    tables_li[index].onclick = function(){
      if(this.onoff == 1){
        this.onoff = 0;
        this.style.backgroundColor = "#069";
      }
      else{
        this.onoff = 1;
        this.style.backgroundColor = this.index%2?"#ace":"";
      }
    }
  }
}
</script>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" id="tables">
  <tr>  
    <td>1</td>
    <td>螞蟻部落歡迎您</td>
  </tr>
  <tr>  
    <td>2</td>
    <td>只有努力奮鬥才會有美好的未來</td>
  </tr>
  <tr>  
    <td>3</td>
    <td>沒有任何人一開始就是高手，必須要努力學習</td>
  </tr>
  <tr>  
    <td>4</td>
    <td>每一天都是新的，不要抱怨去好好的享受</td>
  </tr>
  <tr>  
    <td>5</td>
    <td>div css教程是非常簡單基礎的，沒有任何難度</td>
  </tr>
  <tr>  
    <td>6</td>
    <td>HTML5的良好掌握必須要以javascript為基礎</td>
  </tr>
  <tr>  
    <td>7</td>
    <td>正規表示式真是一門藝術的語言</td>
  </tr>
  <tr>  
    <td>8</td>
    <td>螞蟻部落的url是softwhy.com</td>
  </tr>
  <tr>  
    <td>9</td>
    <td>把握好當前的時間，下一秒都是虛幻的</td>
  </tr>
  <tr>  
    <td>10</td>
    <td>祝大家都能夠有良好的成就</td>
  </tr>
</table>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

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

（2）.var tables = document.getElementById("tables")，獲取id屬性值為tables的物件。

（3）.var tables_li = tables.getElementsByTagName("tr")，獲取table中的tr元素集合。

（4）.var index=0，宣告一個變數並且賦初值為0，用來作為索引。

（5）.var len = tables_li.length，獲取表格行的數量。

（6）.for(index=0; index<len; index++){}，遍歷每一個tr行元素。

（7）.tables_li[index].onoff = 1，為當前tr元素新增一個onoff屬性，並賦初值為1。

（8）.tables_li[index].index = index，為當前tr元素新增一個index屬性，並賦值為當前索引。

（9）.tables_li[index].style.backgroundColor = index%2?"#ace":""，根據奇偶行來設定背景顏色。

（10）.tables_li[index].onmouseover = function(){

  if(this.onoff == 1){

    this.style.backgroundColor = "#06c";

  }

}為tr註冊mouseover事件處理函式，如果元素的onoff屬性值等於1，那麼就更改背景色。

（11）.tables_li[index].onmouseout = function(){

  if(this.onoff == 1){

    this.style.backgroundColor = this.index%2?"#ace":"";

  }

}，當屬性值為1，那麼就還原背景顏色。

（12）.tables_li[index].onclick = function(){

  if(this.onoff == 1){

    this.onoff = 0;

    this.style.backgroundColor = "#069";

  }

  else{

    this.onoff = 1;

    this.style.backgroundColor = this.index%2?"#ace":"";

  }

}，為行註冊click事件處理函式。

當點選的時候，如果行的onoff屬性值為1，那麼就將其設定為0，然後設定背景色，這個時候就相當於當前航背景色鎖定了，滑鼠懸浮或者離開都不會改變背景色。

當再次點選的時候，onoff屬性值設定為1，然後將背景色還原。

二.相關閱讀：

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

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

（3）.onmouseout事件參閱JavaScript mouseout 事件一章節。

（4）.三元運算子參閱三元運算子一章節。

相關文章