表格奇偶行不同背景顏色程式碼

antzone發表於2017-03-14

奇偶行不同背景顏色也就是各行變色效果，這個效果可以有效提高不同行的辨識度，是一項非常人性化的措施，下面就通過程式碼例項介紹一下如何實現此效果，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style type="text/css"> 
.table{ 
  width:300px; 
  height:100px; 
  border:1px solid #ccc; 
  border-collapse:collapse; 
} 
.table td,.table th { 
  border:1px solid #ccc; 
  padding:5px; 
} 
.odd{
  background:#CCC;
}
.even{
  background:#609;
}
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $('.table tbody tr:odd').css('background-color', '#bbf');
  $('.table tbody tr:even').css('background-color','#ffc');
  $(".table tbody tr:odd").addClass("odd");
  $(".table tbody tr:even").addClass("even");
})
</script> 
</head> 
<body> 
<table class="table"> 
  <thead> 
    <tr> 
      <th>螞蟻部落一</th> 
      <th>螞蟻部落二</th> 
    </tr> 
  </thead> 
  <tr> 
    <td>javascript教程</td> 
    <td>jQuery教程</td> 
  </tr> 
  <tr> 
    <td>HTML教程</td> 
    <td>div css教程</td> 
  </tr> 
  <tr> 
    <td>螞蟻部落一</td> 
    <td>螞蟻部落二</td> 
  </tr> 
</table> 
</body> 
</html>

以上程式碼實現了我們的要求，能夠實現表格各行變色效果，程式碼比較簡單，可以參閱相關閱讀。

相關閱讀:

1.: odd選擇器可以參閱jQuery :odd一章節。

2.:even選擇器可以參閱jQuery :even一章節。

3.css()函式可以參閱jQuery css()一章節。

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

特別說明: 

儘管表格中並沒有tbody，瀏覽器處理的時候，會自動為表格新增一個tbody。

相關文章