|
|
復制代碼 代碼如下:
<!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>
下面是一個js版本的，需要的朋友可以參考下。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
JavaScript技術：jQuery 表格隔行變色代碼[修正注釋版]，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
