要求如下:
其所需的代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>员工信息</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
table tr td{
width: 100px;
height: 15px;
}
</style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<style>
table tr td{
border: 1px solid;
}
.odd{
background-color: aliceblue;
}
.even{
background-color: aquamarine;
}
.checked{
background-color: yellow;
}
</style>
<table>
<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>
<script type="text/javascript">
$(function(){
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
$(":checkbox").on("click",function(){
$(this).parent().parent().toggleClass("checked");
});
});
</script>
</body>
</html>
其中odd 选择器选取每个带有奇数 index 值的元素(比如 1、3、5);even 选择器选取每个带有偶数 index 值的元素(比如 2、4、6)。效果如下: