<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用JQ完成表格的隔行换色</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("tbody tr:even").addClass("even");
$("tbody tr:odd").addClass("odd");
$("tbody tr").mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
});
});
</script>
<style>
.even{
background: yellow;
}
.odd{
background: green;
}
.over{
background-color: red;
}
table{
width: 400px;
height: 350px;
margin: auto;
}
</style>
</head>
<body>
<table border="1px" cellpadding="0px" cellspacing="0px" >
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>学号</td>
<td>成绩</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>11</td>
<td>01</td>
<td>99</td>
</tr>
<tr>
<td>李四</td>
<td>27</td>
<td>02</td>
<td>88</td>
</tr>
<tr>
<td>王伟</td>
<td>22</td>
<td>03</td>
<td>33</td>
</tr>
<tr>
<td>张伟</td>
<td>22</td>
<td>04</td>
<td>22</td>
</tr>
<tr>
<td>张益达</td>
<td>11</td>
<td>05</td>
<td>99</td>
</tr>
<tr>
<td>李文</td>
<td>14</td>
<td>06</td>
<td>66</td>
</tr>
</tbody>
</table>
</body>
</html>结果：
