<html>
<head>
<title>超级链接页面预览</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
.hao{
font-weight:bold;
color:red;
font-size:20px;
}
</style>
</head>
<body>
<!-- 不包含复选框的table -->
<table id="myTable">
<tr><td>全选</td></tr>
<tr><td>aa</td><td>11</td></tr>
<tr><td>bb</td><td>22</td></tr>
<tr><td>cc</td><td>33</td></tr>
</table>
<script type="text/javascript">
//添加复选框
$("tr").each(function(index){
if(index ==0){
$(this).prepend("<td><input type='checkbox' id='checkAll' οnclick='ischeck(this);'/></td>");
}else{
$(this).prepend("<td><input type='checkbox' οnclick='ppcheck(this);'/></td>");
}
})
//改变行的样式
$("tr").hover(function(){
$(this).addClass("hao");
},function(){
$(this).removeClass("hao");
})
//全选的点击事件
function ischeck(aa){
if(aa.checked){
$("input[type='checkbox']").each(function(){
this.checked=true;
})
}else{
$("input[type='checkbox']").each(function(){
this.checked=false;
})
}
}
//普通复选框的点击事件
function ppcheck(bb){
if(bb.checked){
if($("#checkAll").is("checked")==false){
$("#checkAll").attr("checked",true);
}
}
if(!bb.checked){
if($("input[type='checkbox']:checked").size()==1){
$("#checkAll").attr("checked",false);
}
}
}
</script>
</body>
</html>
query学习(为table添加复选框)
最新推荐文章于 2021-06-03 14:28:07 发布