jQuery表格隔行變色效果詳解

admin發表於2018-11-28
jQuery

多行多列的資料，行與行之間的分辨可能會有些吃力，比如行數眾多的表格。

隔行變色和滑鼠懸浮在某一行能夠實現行的背景變色，這在一定程度上能夠提高辨識度。

下面就通過一段程式碼例項介紹一下如何實現此效果。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
table{
  background-color:#c0de98;
  text-align:center;
}
.table-tr-title {
  height:26px;
  font-size:12px;
  text-align:center;
}
.table-tr-content {
  height:18px;
  background:#FFFFFF;
  text-align:center;
  font-size:12px;
}
.normalEvenTD {
  background:#DFD8D8;
}
.normalOddTD {
  background:#FFFFFF;
}
.hoverTD {
  background-color:#eafcd5;
  height:18px;
  text-align:center;
  font-size:12px;
}
.trSelected {
  background-color:#51b2f6;
  height:18px;
  text-align:center;
  font-size:12px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  var dtSelector=".list"; 
  var tbList=$(dtSelector); 
  tbList.each(function(){ 
    var self=this; 
    $("tr:even:not(:first)",$(self)).addClass("normalEvenTD");
    $("tr:odd",$(self)).addClass("normalOddTD"); 
    $("tr:not(:first)",$(self)).hover( 
      function(){
        $(this).addClass('hoverTD');
        $(this).removeClass('table-td-content'); 
      }, 
      function(){ 
        $(this).removeClass('hoverTD');
        $(this).addClass('table-td-content'); 
      } 
    ); 
    $("tr",$(self)).click(function(){ 
      var trThis=this; 
      $(self).find(".trSelected").removeClass('trSelected'); 
      if($(trThis).get(0)==$("tr:first", $(self)).get(0)){ 
        return; 
      } 
      $(trThis).addClass('trSelected'); 
    }); 
  }); 
}); 
</script>
</head>
<body>
<table width="99%" class="list" cellpadding="0" cellspacing="1">
  <tr class="table-tr-title">
    <td width="5%">標題</td>
    <td width="5%">標題</td>
    <td width="5%">標題</td>
    <td width="5%">標題</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
  </tr>
  <tr class="table-tr-content">
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
    <td width="5%">螞蟻部落</td>
  </tr>
</table>
</body>
</html>

表格相鄰行之間有不同的背景顏色，並且當滑鼠在表格行上懸浮時，能改變背景顏色。

一.實現原理:

原理比較簡單，為表格的奇偶行新增不同的樣式類，以達到隔行變色的效果，同時為表格行註冊hover事件處理函式，規定滑鼠移到或者離開表格行時新增新增和刪除樣式類，以達到背景變色效果。最後為表格行註冊click事件處理函式，當點選行的時候，能夠實現改變行的背景色效果。

二.程式碼註釋:

（1）.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.var dtSelector=".list"，宣告一個變數，並將一個字串賦值給變數用以用作選擇器。

（3）. var tbList=$(dtSelector)，獲取物件。

（4）.tbList.each(function(){})，將匹配元素作為函式的執行上下文，這裡就是表格物件。

（5）.var self=this，this引用賦值給變數self，this是指向表格物件的，這裡是個DOM物件。

（6）.$("tr:even:not(:first)",$(self)).addClass("normalEvenTD")，為偶數行新增一個樣式類，也就是設定偶數行的背景顏色，not(:first)可以去除匹配的第一個元素，也就是作為標題的第一行不包括在內。$(self)用來限定上下文範圍，也就是匹配指定指定表格內的tr行。

（7）.$("tr:not(:first)",$(self)).hover()，為tr行註冊hover事件處理函式。

（8）.function(){$(this).addClass('hoverTD');},為當前行新增一個樣式類。

（9）.function(){$(this).removeClass('hoverTD');} ，移除樣式類。

（10）.$("tr",$(self)).click(function(){}),為行註冊click事件處理函式，當點選行的時候可以設定行的背景顏色。

（11）.var trThis=this，this指向當前匹配tr的引用，將此引用賦值給變數。

（12）.$(self).find(".trSelected").removeClass('trSelected')，刪除之前點選行新增的樣式類，否則會產生多行都會被設定背景色的現象。

（13）.if($(trThis).get(0)==$("tr:first", $(self)).get(0))，如果點選的是第一行也就是標題行，則跳出函式。

（14）.$(trThis).addClass('trSelected')，為行新增樣式類。

三.相關閱讀:

（1）.:even選擇器可以參閱jQuery :even一章節。

（2）.:not選擇器可以參閱jQuery :not一章節。

（3）.:first選擇器可以參閱jQuery :first一章節。

（4）.addClass()函式可以參閱jQuery addClass()一章節。

（5）.: odd選擇器可以參閱jQuery :odd一章節。

（6）.hover事件可以參閱jQuery hover事件一章節。

（7）.click事件可以參閱jQuery click事件一章節。

（8）.find函式可以參閱jQuery find()一章節。

（9）.removeClass()函式可以參閱jQuery removeClass()一章節。

相關文章