script实现table表的添加、批删、反选

效果图
html

<body>
		姓名：<input type="text" class="name"/>
		性别：<select class="sex">
				<option value="男">男</option>
				<option value="女">女</option>
			 </select>
		生日：<input type="date" class="datea"/>
		住址：<select class="sheng">
				<option value="">--请选择省--</option>
			 </select>
			 <select class="shi">
			 	<option value="">--请选择市--</option>
			 </select>
		<input type="button" class="add" value="添加" />
		<input type="button" class="plsc" value="批量删除" />
		
		<table border="1">
			<tr>
				<td><input type="checkbox" class="ck" /></td>
				<td>姓名</td>
				<td>性别</td>
				<td>生日</td>
				<td>住址</td>
				<td>删除</td>
			</tr>
		</table>
	</body>

script

<script type="text/javascript">
		$(".add").click(function(){
			var name=$(".name").val();
			var sex=$(".sex").val();
			var datea=$(".datea").val();
			var sheng=$(".sheng").val();
			var shi=$(".shi").val();
			$("table").append(`<tr><td><input type="checkbox" class="cd" /></td><td>${name}</td><td>${sex}</td><td>${datea}</td><td>${sheng}${shi}</td><td><input type="button" class="del" value="删除" /></td></tr>`);
		})
		
		$(".ck").click(function(){
			var qx=$(".cd");
			qx.each(function(){
				this.checked=!this.checked;
			})
		})
		
		$(".plsc").click(function(){
			var id=$(".cd:checked");
			if(id.length>0){
				id.each(function(){
					$(this).parent().parent().remove();
				})
			}else{
				alert("请选择数据");
			}
		})
	</script>

script实现table表的添加、批删、反选

猜你喜欢