[网页编程]-12 jQuery 实战项目

prtyaa 2023-12-27 15:54:16  54153
分类专栏：资讯
本篇作为jQuery学习的最终章,做一个练手项目
代码
<html>
	<head>
		<title>jQuery操作表格</title>
		<meta charset="UTF-8"/>
		
		<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
		
		<!--声明css代码域-->
		<style type="text/css">
			tr{
				height: 40px;
			}
		</style>
		
		<script type="text/javascript">
			
			  $(function(){
			  	 
			  	    /*********全选操作*************/
			  	   $("#chks").click(function(){
			  	   	
			  	   	  var  flag= $("#chks").prop("checked");
			  	   	  
			  	   	  $("input[name='chk']").prop("checked",flag);
			  	   })
			  	   
			  	   /***********判断是否全选的操作********/
			  	  $("input[name='chk']").click(function(){
			  	  	   
			  	  	   //---------------------------------------------方案一
			  	  	   //获得所有被勾选的框
			  	  	   /*var chks =$("input[name='chk']:checked");
			  	  	   //获得所有的多选框
			  	  	   var  chs=$("input[name='chk']");
			  	  	   
			  	  	   if(chks.length==chs.length){
			  	  	   	    $("#chks").prop("checked",true);    
			  	  	   }else {
			  	  	   	    $("#chks").prop("checked",false);    
			  	  	   }*/
			  	  	  
			  	  	  //---------------------------------------------方案二
			  	  	  
			  	  	  var flag=true;
			  	  	  
			  	  	  //获得所有的多选框
			  	  	  var  chs=$("input[name='chk']");
			  	  	  
			  	  	 chs.each(function(){
			  	  	 	
			  	  	 	  if(!$(this).prop("checked")){
			  	  	 	  	   flag=false;
			  	  	 	  	   
			  	  	 	  	   return;
			  	  	 	  }
			  	  	 })
			  	  	 
			  	  	 $("#chks").prop("checked",flag);    
			  	  })
			  	  
			  	  /**********[3]实现反选效果************/
			  	 
			  	 $("#fx").click(function(){
			  	 	
			  	 	  //获得所有的多选文本框
			  	 	 var  chk= $("input[name='chk']");
			  	 	 
			  	 	 chk.each(function(){
			  	 	 	
			  	 	 	  //获得每一个多选框此时的状态
			  	 	 	 var  flag= $(this).prop('checked');
			  	 	 	 
			  	 	 	 //实现反选
			  	 	 	 $(this).prop('checked',!flag);
			  	 	 	
			  	 	 })
			  	 	
			  	 })
			
			     /**********[4]实现新增行操作***********/
			    $("#addRow").click(function(){
			    	
			    	   $("#ta").append('<tr id="">'+
				        '<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
				        '<td>《Java编程之道》</td>'+
				        '<td>wollo</td>'+
				        '<td>10</td>'+
			             '</tr>')
			    	
			    })
			    
			    /*********[5]删除行的操作*********/
			   $("#delRow").click(function(){
			   	      
			   	      //获得被勾选的对象
			   	     var  chk= $("input[name='chk']:checked");
			   	     
			   	     if(chk.length>0){
			   	     	
			   	     	
			   	     	 if(window.confirm("是否删除该数据")){
			   	     	 	//执行删除操作
			   	     	 	
			   	     	 	chk.parent().parent().remove();
			   	     	 }
			   	     	
			   	     	
			   	     }else{
			   	     	alert("请至少选择一行数据");
			   	     }
			   	
			   })
			   
			   /*********[6]复制行操作***********/
			    $("#copyRow").click(function(){
			    	
			    	 //获得被勾选的对象
			   	     var  chk= $("input[name='chk']:checked");
			   	     
			   	     if(chk.length>0){
			   	     	//进行复制
			   	     	var   c =chk.parent().parent().clone();
			   	     	
			   	     	//粘贴 
			   	     	$("#ta").append(c);
			   	     	
			   	     }else{
			   	     	alert("请至少选择一行数据进行操作");
			   	     }
			    	
			    })
			  
			    
			  })
			
			
		</script>
		
	</head>
	<body>
		<h3>jQuery操作表格</h3>
		<hr />
		<input type="button" id="fx" value="反选" />
		<input type="button" id="addRow" value="新增一行" />
		<input type="button" id="delRow" value="删除行" />
		<input type="button" id="copyRow" value="复制行" />
		<table border="1px" cellpadding="10px" cellspacing="0" id="ta">
			<tr>
				<td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td>
				<td width="200px">课程</td>
				<td width="200px">教师</td>
				<td width="200px">购买数量</td>
			</tr>
			<tr id="">
				<td><input type="checkbox" name="chk" id="" value="2"/></td>
				<td>《html》</td>
				<td>wollo</td>
				<td>10</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="" value="3" /></td>
				<td>《css》</td>
				<td>赵老师</td>
				<td>10</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="" value="4" /></td>
				<td>《javascript》</td>
				<td>张老师</td>
				<td>30</td>
			</tr>			
		</table>
	</body>
</html>
网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。
本文链接：https://www.xckfsq.com/news/show.html?id=31509
赞同 0
评论 0 条
[网页编程]-12 jQuery 实战项目

相关文章

关注我们
