效果展示
复选框的选中与取消之后的效果
代码展示
这是CSS样式
<style type="text/css">
.odd{
background-color: antiquewhite;
}
.even{
background-color: aquamarine;
}
.checked{
background-color: yellow;
}
table,table,tr,td{
border: 1px solid;
}
td{
width: 100px;
height: auto;
}
</style>
这是HTML代码
<table>
<caption>员工信息</caption>
<tr style="background-color: silver">
<td></td>
<td>姓名</td>
<td>薪水</td>
<td>年龄</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox"/></td>
<td>张三</td>
<td>20000</td>
<td>23</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox"/></td>
<td>李四</td>
<td>22000</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox"/></td>
<td>王五</td>
<td>14000</td>
<td>26</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox"/></td>
<td>马六</td>
<td>15000</td>
<td>21</td>
</tr>
</table>
这是JS代码
<script type="text/javascript">
$(function(){
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
$(":checkbox").on("click",function(){
$(this).parent().parent().toggleClass("checked");
});
});
</script>
这就是上面效果的主要代码了,当然jQuery的引入就不主说了。