jQuery之实战(checkbox,table)

最新推荐文章于 2024-06-12 10:02:09 发布

天涯在身边

最新推荐文章于 2024-06-12 10:02:09 发布

阅读量100

点赞数

分类专栏： JavaScript Jquery 文章标签： jquery checkbox table ViewUI

本文链接：https://blog.csdn.net/liuzidong_liuzidong/article/details/84004532

版权

JavaScript 同时被 2 个专栏收录

39 篇文章 1 订阅

订阅专栏

Jquery

22 篇文章 0 订阅

订阅专栏

实现功能如下：参考图片
1 页面加载时效果
[img]http://dl.iteye.com/upload/attachment/539532/d5891b87-35ed-338d-9269-2f4f22cfdc4a.jpg[/img]
2 全选效果
[img]http://dl.iteye.com/upload/attachment/539536/1c7a6ab1-a70c-3f2d-a61b-b633ddacd17d.jpg[/img]
3 取消全选效果
[img]http://dl.iteye.com/upload/attachment/539532/d5891b87-35ed-338d-9269-2f4f22cfdc4a.jpg[/img]
4 反选效果
[img]http://dl.iteye.com/upload/attachment/539534/0493c5d2-594f-37dd-9fed-4d361d842d2a.jpg[/img]
5 全选奇行效果
[img]http://dl.iteye.com/upload/attachment/539538/6541d8a8-2917-3f57-847c-e326dd13cedd.jpg[/img]
6 全选偶行效果
[img]http://dl.iteye.com/upload/attachment/539538/6541d8a8-2917-3f57-847c-e326dd13cedd.jpg[/img]
7 点击复选框效果
[img]http://dl.iteye.com/upload/attachment/539542/027f0fd5-2ef6-3291-b54f-e1b6ac93cc68.jpg[/img]
具体代码如下：
CSS代码如下：


 <style type="text/css">
            body {
				font-family: Arial, Helvetica, sans-serif;
			}	

            .listhead
			{
			  FONT: 15pt "宋体";
			  COLOR: #010778;
			  BACKGROUND-COLOR: #E7EEF7;
			  BORDER-LEFT: #FFFFFF 1px solid;
			  BORDER-TOP: #FFFFFF 1px solid;
			  BORDER-RIGHT: #D9DFE7 1px solid;
			  BORDER-BOTTOM: #D9DFE7 1px solid;
			}

        </style>

jQuery代码如下：


<script type="text/javascript" >

			$(function(){

			    $('#checkAll').click(function(){
			        /*			    	
			    	if(this.checked == true){
			    		$(":checkbox[name=checkUser]").attr("checked",true);
			    	}else{
			    		$(":checkbox[name=checkUser]").attr("checked",false);
			    	}*/

			    	$("input:checkbox[name=checkUser]").attr("checked",this.checked);
			    	if(this.checked){

			    		  $("#tbody>tr").each(function(index){
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  });
			    	}else{
			    		 $("#tbody>tr").each(function(index){
			    		  	  this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    		 });
			    	}

			    });	

			    $("#selectAll_1").click(function(){
			    	$("input:checkbox[name=checkUser,checkAll]").attr("checked",true);
			    	$("#tbody>tr").each(function(index){
			    		  	  this.style.backgroundColor = "#cfeace";
			    	});
			    });		

			    $("#selectAll_2").click(function(){
			    	//$("input:checkbox[name=checkUser,checkAll]").attr("checked",false);
			    	$("input:checkbox[name=checkUser,checkAll]").removeAttr("checked");//取消全选 
			    	$("#tbody>tr").each(function(index){
			    		this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    	});
			    });		

			    $("#selectAll_3").click(function(){

			        //可用长度来判断是否选定:选中为1,没选为0
					//alert($("#checkAll:checked").length);

					if ($("#checkAll").is(":checked")) {
						//alert("选中了。。");
		   				$("#checkAll").removeAttr("checked");
		   			}else{
		   			   // alert("没选中。。");
		   				$("#checkAll").attr("checked",true);
		   			}

					/* 
					$("input:checkbox[name=checkUser]").each(function(index){						
						//在jQuery内部用this可提高速度						
						if(this.checked){
						   this.checked = false;						   
						}else{
						   this.checked = true;						  
						} 
					});*/

					$("#tbody>tr").each(function(index){

			    		  if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
			    		  	 $(this).find("td:eq(0)>input:checkbox").attr("checked",false);
			    		  	 this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    		  }else{
			    		  	  $(this).find("td:eq(0)>input:checkbox").attr("checked",true);
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  }
			    	});


			    });		

			    $("#selectAll_4").click(function(){

			    	$("input:checkbox[name=checkUser]:even").attr("checked",true);			    	
			    	$("#tbody>tr").each(function(index){					
			    		  if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){			    		  	
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  }
			    	});

			    });	

			    $("#selectAll_5").click(function(){
			    	$("input:checkbox[name=checkUser]:odd").attr("checked",true);
			    	$("#tbody>tr").each(function(index){					
			    		  if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){			    		  	
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  }
			    	});

			    });	 

			    //$("#tbody>tr:even").css("background-color",'#F3F3F3');
			    //$("#tbody>tr:odd").css("background-color",'#DEE9F7'); 	

			    $("#tbody>tr").each(function(index){

			    	this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");

			    	/*
			    	$(this).mouseover(function() {
					  this.style.backgroundColor = "#EEF8FF";
					});
					$(this).mouseout(function() {
					  this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
					});*/

					$(this).bind({
						mouseover:function(){
							this.style.backgroundColor = "#EEF8FF";
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
							  this.style.backgroundColor = "#cfeace";
							}
						},mouseout:function(){
						    this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
							  this.style.backgroundColor = "#cfeace";
							}
						},click:function(){
							//判断tr的第一个td内的input checkbox是什么状态							
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
								this.style.backgroundColor = "#cfeace";
							}else{
								this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
							}							
						}						
					});

			    });		    

			});	

		</script>

HTML代码如下：


 <div style="padding-left:30%;padding-top:5%">
       <h1>checkbox示例</h1>        
       	 <table style="width:500px;height:100%;align:center;border: 1px black solid;background: white;" bgcolor=#7E92A8 border=0 cellpadding=1 cellspacing=1 rules="all">
       	 	 <thead>
       	 	 	<tr class="listhead">
       	 	 		<th><input type="checkbox" id="checkAll"  name="checkAll"/></th>
       	 	 		<th>姓名</th>
       	 	 		<th>年龄</th>
       	 	 		<th>性别</th>       	 	 		
       	 	 	</tr>
       	 	 </thead>
       	 	 <tbody align="center" id="tbody">
       	 	 	<tr id="tr_1">
       	 	 		<td><input type="checkbox" name="checkUser"  value="1"/></td>
       	 	 		<td>张三</td>
       	 	 		<td>25</td>
       	 	 		<td>男</td>
       	 	 	</tr>
       	 	 	<tr id="tr_2">
       	 	 		<td><input type="checkbox" name="checkUser" value="2"/></td>
       	 	 		<td>李四</td>
       	 	 		<td>20</td>
       	 	 		<td>男</td>
       	 	 	</tr>
       	 	 	<tr id="tr_3"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="3"/></td>
       	 	 		<td>王五</td>
       	 	 		<td>30</td>
       	 	 		<td>女</td>
       	 	 	</tr>     
       	 	 	<tr id="tr_4"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="4"/></td>
       	 	 		<td>李逵</td>
       	 	 		<td>36</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_5"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="5"/></td>
       	 	 		<td>王熙凤</td>
       	 	 		<td>31</td>
       	 	 		<td>女</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_6"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="6"/></td>
       	 	 		<td>刘少国</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_7"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="7"/></td>
       	 	 		<td>李四光</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_8"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="8"/></td>
       	 	 		<td>何故</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_9"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="9"/></td>
       	 	 		<td>王冠</td>
       	 	 		<td>30</td>
       	 	 		<td>女</td>
       	 	 	</tr>    
       	 	 	<tr id="tr_10"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="10"/></td>
       	 	 		<td>王平</td>
       	 	 		<td>18</td>
       	 	 		<td>男</td>
       	 	 	</tr>    	 	 	
       	 	 </tbody>
       	 	 <tfoot>
       	 	 	<tr>
       	 	 		<td colspan="4">
       	 	 			<input type="button" value="全选"    id="selectAll_1"/>
       	 	 			<input type="button" value="取消全选" id="selectAll_2"/>
       	 	 			<input type="button" value="反选"    id="selectAll_3"/>
       	 	 			<input type="button" value="全选奇行" id="selectAll_4"/>
       	 	 			<input type="button" value="全选偶行" id="selectAll_5"/>       	 	 			
       	 	 	   </td>
       	 	 	</tr>
       	 	 </tfoot>
       	 </table> 
       <p><a href="index.jsp">返回</a></p>
       </div>

整个页面代码如下：


<%@ page language="java"  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery获取元素写法</title>       		
        <script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>             
        <style type="text/css">
            body {
				font-family: Arial, Helvetica, sans-serif;
			}	

            .listhead
			{
			  FONT: 15pt "宋体";
			  COLOR: #010778;
			  BACKGROUND-COLOR: #E7EEF7;
			  BORDER-LEFT: #FFFFFF 1px solid;
			  BORDER-TOP: #FFFFFF 1px solid;
			  BORDER-RIGHT: #D9DFE7 1px solid;
			  BORDER-BOTTOM: #D9DFE7 1px solid;
			}

        </style>   
		<script type="text/javascript" >

			$(function(){

			    $('#checkAll').click(function(){
			        /*			    	
			    	if(this.checked == true){
			    		$(":checkbox[name=checkUser]").attr("checked",true);
			    	}else{
			    		$(":checkbox[name=checkUser]").attr("checked",false);
			    	}*/

			    	$("input:checkbox[name=checkUser]").attr("checked",this.checked);
			    	if(this.checked){

			    		  $("#tbody>tr").each(function(index){
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  });
			    	}else{
			    		 $("#tbody>tr").each(function(index){
			    		  	  this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    		 });
			    	}

			    });	

			    $("#selectAll_1").click(function(){
			    	$("input:checkbox[name=checkUser,checkAll]").attr("checked",true);
			    	$("#tbody>tr").each(function(index){
			    		  	  this.style.backgroundColor = "#cfeace";
			    	});
			    });		

			    $("#selectAll_2").click(function(){
			    	//$("input:checkbox[name=checkUser,checkAll]").attr("checked",false);
			    	$("input:checkbox[name=checkUser,checkAll]").removeAttr("checked");//取消全选 
			    	$("#tbody>tr").each(function(index){
			    		this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    	});
			    });		

			    $("#selectAll_3").click(function(){

			        //可用长度来判断是否选定:选中为1,没选为0
					//alert($("#checkAll:checked").length);

					if ($("#checkAll").is(":checked")) {
						//alert("选中了。。");
		   				$("#checkAll").removeAttr("checked");
		   			}else{
		   			   // alert("没选中。。");
		   				$("#checkAll").attr("checked",true);
		   			}

					/* 
					$("input:checkbox[name=checkUser]").each(function(index){						
						//在jQuery内部用this可提高速度						
						if(this.checked){
						   this.checked = false;						   
						}else{
						   this.checked = true;						  
						} 
					});*/

					$("#tbody>tr").each(function(index){

			    		  if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
			    		  	 $(this).find("td:eq(0)>input:checkbox").attr("checked",false);
			    		  	 this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
			    		  }else{
			    		  	  $(this).find("td:eq(0)>input:checkbox").attr("checked",true);
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  }
			    	});


			    });		

			    $("#selectAll_4").click(function(){

			    	$("input:checkbox[name=checkUser]:even").attr("checked",true);			    	
			    	$("#tbody>tr").each(function(index){					
			    		  if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){			    		  	
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  }
			    	});

			    });	

			    $("#selectAll_5").click(function(){
			    	$("input:checkbox[name=checkUser]:odd").attr("checked",true);
			    	$("#tbody>tr").each(function(index){					
			    		  if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){			    		  	
			    		  	  this.style.backgroundColor = "#cfeace";
			    		  }
			    	});

			    });	 

			    //$("#tbody>tr:even").css("background-color",'#F3F3F3');
			    //$("#tbody>tr:odd").css("background-color",'#DEE9F7'); 	

			    $("#tbody>tr").each(function(index){

			    	this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");

			    	/*
			    	$(this).mouseover(function() {
					  this.style.backgroundColor = "#EEF8FF";
					});
					$(this).mouseout(function() {
					  this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
					});*/

					$(this).bind({
						mouseover:function(){
							this.style.backgroundColor = "#EEF8FF";
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
							  this.style.backgroundColor = "#cfeace";
							}
						},mouseout:function(){
						    this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
							  this.style.backgroundColor = "#cfeace";
							}
						},click:function(){
							//判断tr的第一个td内的input checkbox是什么状态							
							if($(this).find("td:eq(0)>input:checkbox").is(":checked") == true){
								this.style.backgroundColor = "#cfeace";
							}else{
								this.style.backgroundColor = (index % 2 != 1 ? "#F3F3F3" :"#DEE9F7");
							}							
						}						
					});

			    });		    

			});	

		</script>

    </head>
    <body>
       <div style="padding-left:30%;padding-top:5%">
       <h1>checkbox示例</h1>        
       	 <table style="width:500px;height:100%;align:center;border: 1px black solid;background: white;" bgcolor=#7E92A8 border=0 cellpadding=1 cellspacing=1 rules="all">
       	 	 <thead>
       	 	 	<tr class="listhead">
       	 	 		<th><input type="checkbox" id="checkAll"  name="checkAll"/></th>
       	 	 		<th>姓名</th>
       	 	 		<th>年龄</th>
       	 	 		<th>性别</th>       	 	 		
       	 	 	</tr>
       	 	 </thead>
       	 	 <tbody align="center" id="tbody">
       	 	 	<tr id="tr_1">
       	 	 		<td><input type="checkbox" name="checkUser"  value="1"/></td>
       	 	 		<td>张三</td>
       	 	 		<td>25</td>
       	 	 		<td>男</td>
       	 	 	</tr>
       	 	 	<tr id="tr_2">
       	 	 		<td><input type="checkbox" name="checkUser" value="2"/></td>
       	 	 		<td>李四</td>
       	 	 		<td>20</td>
       	 	 		<td>男</td>
       	 	 	</tr>
       	 	 	<tr id="tr_3"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="3"/></td>
       	 	 		<td>王五</td>
       	 	 		<td>30</td>
       	 	 		<td>女</td>
       	 	 	</tr>     
       	 	 	<tr id="tr_4"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="4"/></td>
       	 	 		<td>李逵</td>
       	 	 		<td>36</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_5"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="5"/></td>
       	 	 		<td>王熙凤</td>
       	 	 		<td>31</td>
       	 	 		<td>女</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_6"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="6"/></td>
       	 	 		<td>刘少国</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_7"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="7"/></td>
       	 	 		<td>李四光</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_8"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="8"/></td>
       	 	 		<td>何故</td>
       	 	 		<td>30</td>
       	 	 		<td>男</td>
       	 	 	</tr>  
       	 	 	<tr id="tr_9"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="9"/></td>
       	 	 		<td>王冠</td>
       	 	 		<td>30</td>
       	 	 		<td>女</td>
       	 	 	</tr>    
       	 	 	<tr id="tr_10"> 
       	 	 		<td><input type="checkbox" name="checkUser" value="10"/></td>
       	 	 		<td>王平</td>
       	 	 		<td>18</td>
       	 	 		<td>男</td>
       	 	 	</tr>    	 	 	
       	 	 </tbody>
       	 	 <tfoot>
       	 	 	<tr>
       	 	 		<td colspan="4">
       	 	 			<input type="button" value="全选"    id="selectAll_1"/>
       	 	 			<input type="button" value="取消全选" id="selectAll_2"/>
       	 	 			<input type="button" value="反选"    id="selectAll_3"/>
       	 	 			<input type="button" value="全选奇行" id="selectAll_4"/>
       	 	 			<input type="button" value="全选偶行" id="selectAll_5"/>       	 	 			
       	 	 	   </td>
       	 	 	</tr>
       	 	 </tfoot>
       	 </table> 
       <p><a href="index.jsp">返回</a></p>
       </div>
    </body>
</html>

天涯在身边

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之实战(checkbox,table)

实现功能如下：参考图片1 页面加载时效果[img]http://dl.iteye.com/upload/attachment/539532/d5891b87-35ed-338d-9269-2f4f22cfdc4a.jpg[/img]2 全选效果[img]http://dl.iteye.com/upload/attachment/539536/1c7a6ab1-a70c-3f2d-a...
复制链接

扫一扫

专栏目录