JQuery 添加删除

最新推荐文章于 2023-04-17 19:11:51 发布

nijiadalinge

最新推荐文章于 2023-04-17 19:11:51 发布

阅读量162

点赞数

分类专栏：移动开发

本文链接：https://blog.csdn.net/NIJIADALINGE/article/details/79174485

版权

移动开发专栏收录该内容

58 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			boy{
				width: 80%;
				margin: 0 auto;
			}
			table{
				width: 50%;
				border:  1px solid;
			}
			tr td{
				border: 1px solid;
			}
			tr:hover{
				background-color: yellow;
			}
		</style>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			function del(e){
				$(e).parent().parent().remove();
			}
			function save(){
				var tr=$("<tr></tr>");
				tr.append("<td><input type='checkbox' name='ck'/></td>");
				
				var  ins = $("input[name = 'in']");
				
				for(var i = 0; i<ins.length;i++){
					var td = $("<td></td>");
					td.text(ins[i].value);
					
					tr.append(td);
				}
				
				tr.append("<td><button οnclick='del(this)'>删除</button></td>");
				$("table").append(tr);
			}
			function deleteAll(){
				var all = $("input:checked[name='ck']");
				console.log(all.length);
				if(all.length==0){
					alert("请选择，然后进行删除");
					return;
				}
				
				
				for(var i = 0; i<all.length;i++){
					all[i].parentNode.parentNode.remove();
				}
			}
			
			function ckAll(){
				var isxz = $("#ckall")[0].checked;
				var cks = $ ("input[name = 'ck']");
				
				cks.each(function(){
					$(this).prop("checked",isxz);
				})
				
			}
			
		</script>
	</head>
	<body>
		<form>
			用户名<input type="text" name="in" />
			密码<input type="password" name="in" />
			邮箱<input type="email" name="in" />
			
			<input type="button" οnclick="save()" value="保存" />
		</form>
		<table border="1" cellspacing="0">
			<tr>
				<td colspan="5">
					<button id="deleteAll" οnclick="deleteAll()">批量删除</button>
				</td>
			</tr>
			<tr>
				<th><input type="checkbox" id="ckall" οnchange="ckAll()"/>全选 /全不选</th>
				<th>用户名</th>
				<th>密码</th>
				<th>邮箱</th>
				<th><button>操作</button></th>
			</tr>
			<tr>
				<td><input type="checkbox" name="ck"/></td>
				<td>马云</td>
				<td>123</td>
				<td>123@qq.com</td>
				
				<td><button οnclick="del(this)">删除</button></td>
			</tr>
		</table>
	</body>
</html>