GIF動態效果：
代碼部分：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<style>
.odd{
background-color:antiquewhite ;
}
.even{
background-color: aquamarine;
}
.checked{
background-color: yellow;
}
table,table,td{
border: 1px solid;
}
td{
width: 100px;
}
</style>
</head>
<body>
<table>
<caption>員工信息</caption>
<tr>
<td></td>
<td>姓名</td>
<td>薪水</td>
<td>年齡</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>張三</td>
<td>20000</td>
<td>23</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李四</td>
<td>22000</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>14000</td>
<td>26</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>馬六</td>
<td>15000</td>
<td>21</td>
</tr>
</table>
<div id ="show"></div>
<script>
$(function(){
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
$(":checkbox").on("click",function(){
$(this).parent().parent().toggleClass("checked");
});
});
</script>
</body>
</html>