<html>
<head>
<title>Hello, Ajax world!</title>
<script type="text/javascript"
src="../js/jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('.stripe tr').mouseover(function(){
$(this).addClass('over');
}).mouseout(function(){
$(this).removeClass('over');
});
$(".stripe tr:odd").addClass('alt');
});
function showV(){
alert($('email'));
}
</script>
<style>
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">
<!--用class="stripe"來標識需要使用該效果的表格-->
<thead>
<tr>
<th>姓名</th><th>年齡</th><th>QQ</th><th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>鄧國梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>鄧國梁</td>
<td>24</td>
<td>31540205</td>
<td>s@sn.hk</td>
</tr>
<tr>
<td>鄧國梁</td>
<td>25</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>鄧國梁</td>
<td>26</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>鄧國梁</td>
<td>27</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>鄧國梁</td>
<td>28</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
jquery-1.2.1.pack.js下載地址：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.1.pack.js&can=2&q=
這個例子相當簡單，
了解更多jquery知識請訪問這里