query学习（为table添加复选框）

最新推荐文章于 2023-07-08 10:46:39 发布

sywhdou

最新推荐文章于 2023-07-08 10:46:39 发布

阅读量676

点赞数

分类专栏： jquery 文章标签： jquery 初级学习 checkbox table

本文链接：https://blog.csdn.net/sywhdou/article/details/11563085

版权

jquery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<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>

sywhdou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
query学习（为table添加复选框）

超级链接页面预览 .hao{ font-weight:bold; color:red; font-size:20px; } 全选 aa11 bb22 cc33 //添加复选框$("tr").each(function(index){ if(index ==0){ $(this).prep
复制链接

扫一扫