<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="Js/jquery.js"></script>
<style>
table,tr,thead{
border: 2px solid #000;
border-collapse: collapse;
width: 200px;
height: 20px;
background-color: cornflowerblue;
}
.odd{
background-color: antiquewhite;
}
.even{
background-color: aquamarine;
}
.checked{
background-color: yellow;
</style>
</head>
<body>
<table >
<thead>
<tr><td></td><td>姓名</td><td>薪水</td><td>年龄</td></tr>
</thead>
<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>
<script >
$(function(){
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
$(":checkbox").on("click",function () {
if ($(this).is(":checked")){
$(this).parent().parent().toggleClass("checked");
}else {
$(this).parent().parent().toggleClass("checked");
}
});
});
</script>
</body>
</html>
来源：https://blog.csdn.net/weixin_45747093/article/details/102779769