快捷導航

jQuery 表格隔行變色代碼[修正注釋版]

更新時間：2008年11月18日 00:24:17 作者：

代碼比較精簡，大家可以了解下jquery的對象控制方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>jquery 奇偶變色</title> 
<script src="http://img.jb51.net/jslib/jquery/jquery1.3.2.js"></script> 
<script> 
$(document).ready(function() { 
$('tr').addClass('odd'); 
$('tr:even').addClass('even'); //奇偶變色，添加樣式 
}); 
</script> 
<style> 
#hacker tr:hover{ 
background-color:red; //使用CSS偽類達到鼠標移入行變色的效果，比Jquery 的mouseover,hover 好用 
} 

.odd { 
background-color: #ffc; /* pale yellow for odd rows */ 
} 
.even { 
background-color: #cef; /* pale blue for even rows */ 
} 
</style> 
</head> 
<body> 
<table id="hacker"> 
<tr> 
<td>As You Like It</td> 
<td>Comedy</td> 
</tr> 
<tr> 
<td>All's Well that Ends Well</td> 
<td>Comedy</td> 
</tr> 
<tr> 
<td>Hamlet</td> 
<td>Tragedy</td> 
</tr> 
<tr> 
<td>Macbeth</td> 
<td>Tragedy</td> 
</tr> 
<tr> 
<td>Romeo and Juliet</td> 
<td>Tragedy</td> 
</tr> 
<tr> 
<td>Henry IV, Part I</td> 
<td>History</td> 
</tr> 
<tr> 
<td>Henry V</td> 
<td>History</td> 
</tr> 
</table> 
</body> 
</html> 