<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.bgRed{
background-color: #b2dba1;
}
</style>
<body>
<table>
<thead>
<tr>
<th><input type="checkbox" id="checkAll"> 序号</th>
<th>所属机构</th>
<th>姓名</th>
<th>手机号码</th>
</tr>
</thead>
<tbody>
<td ><input type="checkbox" name="_dataCheckBox">1</td>
<td>山东</td>
<td>张三</td>
<td>15689547865</td>
</tr>
<tr>
<td ><input type="checkbox" name="_dataCheckBox">2</td>
<td>山东</td>
<td>张三</td>
<td>15689547865</td>
</tr>
</tbody>
</table>
<!--//其他行通过js中的appendto动态添加-->
</body>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script>
$("tbody tr").each(function(){
var _this = this;
$(this).children().slice(1).click(function(){//关键，过滤复选框所在的td的点击事件冲突
$($(_this).children()[0]).children().each(function(){
if(this.type=="checkbox"){
if(!this.checked){
this.checked = true;
$(_this).addClass("bgRed")
}else{
this.checked = false;
$(_this).removeClass("bgRed")
}
}
});
});
});
</script>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
