jquery的增删改查

效果图如下：

 

css代码如下：

html代码如下：

	

			

				

				
姓名
				
性别
				
删除
				
			
			

				
 
				
金豪
				
男
				

					
				
			
			

				
 
				
陈宇
				
男
				

					
				
			
			

				
 
				
麦腾阳
				
男
				

					
				
			
			

				
 
				
王思聪
				
男
				
 
			
		
		
		
		全选
		反选
		全不选
		批量删除
		添加
		
		
		

			

				
姓名
				

			
			

				
性别
				

					
						---请输入---
						男♂
						女♀
					
					
				
			
			

				

					确认添加
					确认修改
					
				
				
			
			
		
		

js代码如下：

	//全选
		$(".qx").on("click",function(){
			//找到复选框 
			$(":checkbox").prop("checked",true)

		})
		//第二种方法 点击复选框
//		$(":checkbox:first").on("click",function(){
//
//			$(":checkbox").prop("checked",$(this).prop("checked"))
//
//		})
		//反选 
		$(".fx").on("click",function(){
				$(":checkbox").each(function(){
					this.checked=!this.checked
					
				})
			
		})
		
		
		//全不选
		$(".qbx").on("click",function(){
			//找到复选框 
			$(":checkbox").prop("checked",false)

		})
		
		//删除
		$(".del").on("click",function(){
			$(this).parent().parent().remove()
			
		})
		//批量删除
		$(".plsc").on("click",function(){
			
			if ($(":checkbox:checked").length==0) {
				alert("请至少选中一条")
			} else{
				$(":checkbox:checked").each(function(){
				$(this).parent().parent().remove()
			})
			}
			
			
		})
		
		
		// 点击添加时出现弹层
		$(".add").on("click",function(){
			$(".addAll").show()
			$(".trueAdd").show()
			$(".truexiugai").hide()
		})
		//点击确认添加按钮的逻辑实现
		$(".trueAdd").on("click",function(){
			// 获取信息
			var name=$(".names").val()
			var sex=$(".sexs").val()
//			$(".trueAdd").text("确认添加")
			//姓名不得为空 如果性别为 ”请选择“ 改为男
			if (name=="") {
				alert("请输入姓名")
			} else if(sex=="---请输入---"){
				alert("请选择性别")
			}else{
				// 拼接 ，
		
		
		$(".tableOne").append(`
				 
				${name}
				${sex}
				
					
				
			`)
		
			$(".names").val("")
			$(".sexs").val("---请输入---")
			
			$(".addAll").hide()
			}
			
			//删除
		$(".del").on("click",function(){
			$(this).parent().parent().remove()
			
		})
//			console.log(sex)
		
		})
		
		//修改
		
		$(".xiugai").on("click",function(){
			$(".addAll").show()
			
		//获取确认添加按钮文本改成确认修改
//	    	$(".trueAdd").text("确认修改")
	    //获取当前的文本 
	    	var name =$(this).parent().siblings("td:nth-child(2)").text()
//	    	console.log(name)
			var sex = $(this).parent().siblings("td:nth-child(3)").text()
	    		
			$(".names").val(name)
			$(".sexs").val(sex)
			$(".trueAdd").hide()
			$(".truexiugai").show()
			var that=$(this)
			//点击确认修改时
		$(".truexiugai").on("click",function(){
			// 获取信息
			var name=$(".names").val()
			var sex=$(".sexs").val()
			that.parent().siblings("td:nth-child(2)").text(name)
			that.parent().siblings("td:nth-child(3)").text(sex)
			
			$(".addAll").hide()
			
		})
			
		})
		

ok 效果完成