首頁 > 開發者 > JavaScript
源碼說明：
1) example.html為集合了jQuery,Javascript,HTML,CSS的源碼。
2) jquery-1.3.1.js 為jQuery最新發行的庫檔案，當然這是使用jQuery的前提哦. 你可以去官網下載版本庫，URL：http://docs.jquery.com/Downloading_jQuery#Current_Release
點擊example.html檔案即可看到效果
。代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>StripingTable</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //這個就是傳說的ready
$(".stripe tr").mouseover(function(){
//如果滑鼠移到class為stripe的表格的tr上時，執行函數
$(this).addClass("over");}).mouseout(function(){
//給這行添加class值為over，並且當滑鼠一出該行時執行函數
$(this).removeClass("over");}) //移除該行的class
$(".stripe tr:even").addClass("alt");
//給class為stripe的表格的偶數行添加class值為alt
});
</script>
<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; /*這個將是滑鼠高亮行的背景色*/
}
</style>
</head>
<body>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<!color="#008000">--用class="stripe"來標識需要使用該效果的表格--
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>cq.Jone</td>
<td>23</td>
<td>284191999</td>
<td>cq.jone@gmail.com</td>
</tr>
<tr>
<td>cq.Jone</td>
<td>23</td>
<td>284191999</td>
<td>cq.jone@gmail.com</td>
</tr>
<tr>
<td>cq.Jone</td>
<td>23</td>
<td>284191999</td>
<td>cq.jone@gmail.com</td>
</tr>
<tr>
<td>cq.Jone</td>
<td>23</td>
<td>284191999</td>
<td>cq.jone@gmail.com</td>
</tr>
<tr>
<td>cq.Jone</td>
<td>23</td>
<td>284191999</td>
<td>cq.jone@gmail.com</td>
</tr>
<tr>
<td>cq.Jone</td>
<td>23</td>
<td>284191999</td>
<td>cq.jone@gmail.com</td>
</tr>
</tbody>
</table>
<p>PS: 飄飄說我的table沒有<thead>,我知錯了...</p>
</body>
</html>
更多jQuery的入門資料請參考：http://jeasony.javaeye.com/blog/307162
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
