jquery的增删改查

<style>
		.addAll{
			display: none;
		}
	</style>

	<table class="tableOne" border="1" width="100%">
			<tr>
				<th><input type="checkbox" /></th>
				<th>姓名</th>
				<th>性别</th>
				<th>删除</th>
				
			</tr>
			<tr align="center">
				<td><input type="checkbox"  /> </td>
				<td>金豪</td>
				<td>男</td>
				<td><input class="del" type="button" value="删除" />
					<input class="xiugai" type="button" value="修改" />
				</td>
			</tr>
			<tr align="center">
				<td><input type="checkbox"  /> </td>
				<td>陈宇</td>
				<td>男</td>
				<td><input class="del" type="button" value="删除" />
					<input class="xiugai" type="button" value="修改" />
				</td>
			</tr>
			<tr align="center">
				<td><input type="checkbox"  /> </td>
				<td>麦腾阳</td>
				<td>男</td>
				<td><input class="del" type="button" value="删除" />
					<input class="xiugai" type="button" value="修改" />
				</td>
			</tr>
			<tr align="center">
				<td><input type="checkbox"  /> </td>
				<td>王思聪</td>
				<td>男</td>
				<td><input class="del" type="button" value="删除" /> <input class="xiugai" type="button" value="修改" /></td>
			</tr>
		</table>
		
		
		<button class="qx">全选</button>
		<button class="fx">反选</button>
		<button class="qbx">全不选</button>
		<button class="plsc">批量删除</button>
		<button class="add">添加</button>
		
		
		<table class="addAll" width="300" height="200" bgcolor="#e5e5e5">
			<tr align="center">
				<td>姓名</td>
				<td><input class="names" type="text" placeholder="请输入姓名" /></td>
			</tr>
			<tr align="center">
				<td>性别</td>
				<td>
					<select  class="sexs">
						<option>---请输入---</option>
						<option value="男">男♂</option>
						<option value="女">女♀</option>
					</select>
					
				</td>
			</tr>
			<tr align="center">
				<td  colspan="2">
					<button class="trueAdd">确认添加</button>
					<button class="truexiugai">确认修改</button>
					
				</td>
				
			</tr>
			
		</table>

	//全选
		$(".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(`<tr align="center">
				<td><input type="checkbox"  /> </td>
				<td>${name}</td>
				<td>${sex}</td>
				<td><input class="del" type="button" value="删除" />
					<input class="xiugai" type="button" value="修改" />
				</td>
			</tr>`)
		
			$(".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()
			
		})
			
		})