实验示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>实验</title>
<style>
table{
border: 0;
border-collapse: collapse;
}
td{
font:normal 12px/17px Arial;
padding: 2px;
width: 100px;
}
th{
font:bold 12px/17px Arial;
text-align: left;
padding:4px;
border-bottom: 1px solid yellow;
}
.odd{
background: orange;
}
.even{
background: orangered;
}
.light{
background: blue;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>产品名称</th>
<th>产地</th>
<th>厂商</th>
</tr>
</thead>
<tbody>
<tr>
<td>电饭煲</td>
<td>佛山</td>
<td>美的</td>
</tr>
<tr>
<td>电视机</td>
<td>深圳</td>
<td>创维</td>
</tr>
<tr>
<td>洗衣机</td>
<td>青岛</td>
<td>海尔</td>
</tr>
</tbody>
</table>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("tbody tr:even").addClass("odd");
$('tbody tr:odd').addClass("even");
$("tbody tr").hover(
function () {$(this).addClass("light");},
function () {$(this).removeClass("light");}
);
});
</script>
</body>
</html>
实验结果：
本期实验结束，欢迎大家关注。
