jQuery實現的隔行變色程式碼例項

admin發表於2017-02-23
jQuery

隔行變色效果在大量的網站應用，尤其是表格或者新聞列表之類的結構，可以有效增強網站的辨識度,更為人性化，下面通過一個簡單的例項介紹一下它的實現原理，至於它的美觀度這裡就不講究了，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>螞蟻部落</title>
<style type="text/css">
table{
  width:300px;
}
caption{
  background:#DCA;
}
th{
  background:#FCA;
  width:50%;
}
td{
  text-align:center;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  odd= {"background":"#EDA","color":"#3F5"};
  even={"background":"#2DA","color":"#875"};
  odd_even("#table_test",odd,even); 
}); 
function odd_even(id,odd,even){ 
  $(id).find("tr").each(function(index,element){ 
    if(index%2==1){
      $(this).css(odd);
    } 
    else{
      $(this).css(even); 
    }
  })
} 
</script>
</head>
<body>
<table id="table_test">
  <caption>表格標題</caption>
  <tr>
    <th>網站名稱</th>
    <th>網站所在地</th>
  </tr>
  <tr>
    <td>螞蟻部落</td>
    <td>青島市南</td>
  </tr>
  <tr>
    <td>螞蟻部落</td>
    <td>青島市南</td>
  </tr>
  <tr>
    <td>螞蟻部落</td>
    <td>青島市南</td>
  </tr>
  <tr>
    <td>螞蟻部落</td>
    <td>青島市南</td>
  </tr>
  <tr>
    <td>螞蟻部落</td>
    <td>青島市南</td>
  </tr>
  <tr>
    <td>螞蟻部落</td>
    <td>青島市南</td>
  </tr>
  <tr>
    <td>螞蟻部落</td>
    <td>青島市南</td>
  </tr>
  <tr>
    <td>螞蟻部落</td>
    <td>青島市南</td>
  </tr>
</table>
</body>
</html>

以上程式碼實現了我們想要的隔行變色效果，下面簡單介紹一下它的實現過程。

一.實現原理:

原理非常的簡單，通過each()便利每一行，然後通過索引值求餘來判斷奇偶行，然後給它們每一行設定不同的背景顏色。

二.程式碼註釋:

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

2.odd={"background":"#EDA","color":"#3F5"}和even={"background":"#2DA","color":"#875"}，建立兩個json格式的物件，用於設定奇偶行的背景顏色。

3.odd_even("#table_test",odd,even)，呼叫函式並且傳遞引數。

4.function odd_even(id,odd,even){}，建立一個函式，此函式會傳遞3個引數，第一個是要設定隔行變色表格的id，第二個和第三個分別是奇偶行的背景顏色。

5.$(id).find("tr").each(function(index,element){ }，獲取tr並且通過each函式遍歷。

6.if(index%2==1) ，如果索引和2求餘，如果餘數是1，那麼就將設定指定的背景顏色，否則設定另一個背景顏色。需要注意的是，索引值是從零開始的，所以，索引為奇數的時候是偶數行。

相關文章