jQuery 表格实现

最新推荐文章于 2024-07-31 15:52:50 发布

AloneDrifters

最新推荐文章于 2024-07-31 15:52:50 发布

阅读量852

点赞数

分类专栏： web 文章标签： js web

本文链接：https://blog.csdn.net/qq_53609683/article/details/116156405

版权

web 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

该博客主要介绍了如何使用jQuery实现表格的各种操作，包括全选和反选表格中的复选框，新增表格行，删除选定行以及复制选定行的功能。通过示例代码详细解释了每个功能的实现逻辑，帮助读者掌握jQuery在表格操作上的应用。

摘要由CSDN通过智能技术生成

<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  inps =$("input[name='chk']");
			   	 	   
			   	 	    /*for(var  i  in  inp){
			   	 	    	
			   	 	    	console.log(inp[i]);
			   	 	    	
			   	 	    }*/
			   	 	   
			   	 	   var  flag=true;
			   	 	   
			   	 	   inps.each(function(){
			   	 	   	
			   	 	   	//循环体
			   	 	   	  if(!$(this).prop('checked')){
			   	 	   	  	//证明至少有一个框没有被勾选
			   	 	   	  	flag=false;
			   	 	   	  	
			   	 	   	  	return;	
			   	 	   	  }
			   	 	   	
			   	 	   })
			   	 	   
			   	 	   $("#chks").prop('checked',flag); 	    
			   	 	
			   	 })
			   	 /********实现反选的效果***********/
			   	
			   	  $("#fx").click(function(){
			   	  	
			   	  	   var  inps =$("input[name='chk']");
			   	  	   
			   	  	   inps.each(function(){
			   	  	   	   
			   	  	   	   //当前多选框的状态
			   	  	   	  var  flag=   $(this).prop('checked');
			   	  	   	  
			   	  	   	  $(this).prop("checked",!flag)
			   	  	   	
			   	  	   })	
			   	  })
			   	  
			   	  /*****新增一行数据********/
			   	 
			   	 $("#addRow").click(function(){
			   	 	
			   	 	$("#ta").append('<tr>'+
				    '<td><input type="checkbox" name="chk" id="" value="4" /></td>'+
				    '<td>《web开发详解》</td>'+
				    '<td>刘老师</td>'+
				    '<td>30</td>'+
			        '</tr>') 	
			   	 })
			   	 
			   	 /*****移除指定的数据****/
			   	
			   	$("#delRow").click(function(){
			   		
			   		//获得所有被选中的多选框
			   		 var   v =$("input[name='chk']:checked");
			   		 
			   		 if(v.length==0){
			   		 	
			   		 	alert("请至少勾选一行数据")
			   		 	
			   		 }else{
			   		 	
			   		 	//parent()--获得当前节点的父节点
			   		 	v.parent().parent().remove();
			   		 }
			   	})
			   	
			   	/******赋值行的操作*******/
			   	
			   	$("#copyRow").click(function(){
			   		
			   		//获得被勾选的input
			   		var   v =$("input[name='chk']:checked");
			   		
			   		if(v.length==0){
			   			
			   			alert("请至少选择一行进行复制");
			   		}else {
			   			
			   			//赋值一行
			   			var  tr=v.parent().parent().clone();
			   			
			   			//把复制的行黏贴到指定的表格中
			   			$("#ta").append(tr)	
			   			
			   		}  		  
			   	})
			   })		
		</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>《Java编程之道》</td>
				<td>wollo</td>
				<td>10</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="" value="3" /></td>
				<td>《Python和我的故事》</td>
				<td>赵老师</td>
				<td>10</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="chk" id="" value="4" /></td>
				<td>《web开发详解》</td>
				<td>张老师</td>
				<td>30</td>
			</tr>			
		</table>