這裏我直接貼上代碼，在代碼上稍作解釋：
<!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 runat="server">
<title>無標題頁</title>
//導入jquery庫文件~！
<. type="text/." src="../JS/jquery.js"></.>
<. language =. >
//html載入完畢後運行$(document).ready()
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>無標題頁</title>
//導入jquery庫文件~！
<. type="text/." src="../JS/jquery.js"></.>
<. language =. >
//html載入完畢後運行$(document).ready()
$(document).ready(function(){
//爲類型名爲csstab標籤的tr子標籤添加mouseover 和 mouseout方法，mouseout在mouseover 後執行,addClass和removeClass分別添加類和移除類樣式~！
$(".csstab tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");})
$(".csstab tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");})
//爲偶數tr，添加樣式~！
$(".csstab tr:even").addClass("alt");
});
</.>
<style type ="text/css" >
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc; /*這行將給所有的tr加上背景色*/
}
tr.over td {
background:#bcd4ec; /*這個將是鼠標高亮行的背景色*/
cursor:pointer;
}
</style>
</head>
<body>
<h1>
用jquery實現雙色表格，鼠標移動到上面時，行變色~！</h1>
<form id="form1" runat="server">
<div>
<table width =400 class ="csstab" cellspacing =0>
<thead>
<tr>
<th>
姓名</th>
<th>
年齡</th>
<th>
性別</th>
<th>
QQ</th>
</tr>
</thead>
<tbody>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
$(".csstab tr:even").addClass("alt");
});
</.>
<style type ="text/css" >
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc; /*這行將給所有的tr加上背景色*/
}
tr.over td {
background:#bcd4ec; /*這個將是鼠標高亮行的背景色*/
cursor:pointer;
}
</style>
</head>
<body>
<h1>
用jquery實現雙色表格，鼠標移動到上面時，行變色~！</h1>
<form id="form1" runat="server">
<div>
<table width =400 class ="csstab" cellspacing =0>
<thead>
<tr>
<th>
姓名</th>
<th>
年齡</th>
<th>
性別</th>
<th>
QQ</th>
</tr>
</thead>
<tbody>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
<tr>
<td>
opper</td>
<td>
23</td>
<td>
男</td>
<td>
56791700</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
自己可考代碼看下運行效果~！
這裏有一個jQuery的技巧不得不提一下：jQuery的鏈式操作，什麼是鏈式操作呢？ 我們來看看，本來應該寫成這樣子的：
$(".stripe tr").mouseover(function(){
$(this).addClass("over");})
$(".stripe tr").mouseout(function(){
$(this).removeClass("over"); })
$(this).addClass("over");})
$(".stripe tr").mouseout(function(){
$(this).removeClass("over"); })
但是我們寫成了：
$(".stripe tr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})