复选框控制表格的行高亮
<!DOCTYPE html>
<html>
<head>
<title>复选框控制表格的行高亮</title>
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<style type="text/css">
table{ border:0;border-collapse:collapse;}
tr td{
width:100px;
font:normal 12px/17px Arial;
}
tr th{
text-align:left;
font:bold 12px/17px Arial;
}
.odd{
background-color: rgba(232, 230, 230, 0.46);
}
.selected{
background-color: rgba(64, 226, 51, 0.86);
}
</style>
</head>
<body>
<table>
<thead>
<tr><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="checkboxs" checked></td><td>张三</td><td>男</td><td>广州</td>
</tr>
<tr>
<td><input type="checkbox" name="checkboxs"></td><td>李四</td><td>男</td><td>东莞</td>
</tr>
<tr>
<td><input type="checkbox" name="checkboxs"></td><td>小明</td><td>男</td><td>深圳</td>
</tr>
<tr>
<td><input type="checkbox" name="checkboxs"></td><td>小花</td><td>女</td><td>茂名</td>
</tr>
<tr>
<td><input type="checkbox" name="checkboxs"></td><td>小虎</td><td>男</td><td>湛江</td>
</tr>
<tr>
<td><input type="checkbox" name="checkboxs"></td><td>赵六</td><td>男</td><td>上海</td>
</tr>
<tr>
<td><input type="checkbox" name="checkboxs"></td><td>王五</td><td>女</td><td>湖南</td>
</tr>
<tr>
<td><input type="checkbox" name="checkboxs"></td><td>刘思思</td><td>女</td><td>广州</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function(){
//1.表单变色
$("tbody>tr:odd").addClass('odd');
//2.单选框控制表格高亮
$("tbody>tr").click(function() {
var $hasSelected=$(this).hasClass('selected');
$(this)[$hasSelected ? 'removeClass' : 'addClass']('selected')
.find(':checkbox').attr('checked',!$hasSelected );
});
//
//另外，初始化表格的时候，如果有默认被选中，需这样处理
$("tbody>tr:has(:checked)").addClass('selected');
})
</script>
</body>
</html>
