jQuery实现添加,批量删除,全选

最新推荐文章于 2023-06-08 14:31:45 发布

窗台的花花

最新推荐文章于 2023-06-08 14:31:45 发布

阅读量1.2k

点赞数

分类专栏：前端学习小案例文章标签： jquery javascript ajax

本文链接：https://blog.csdn.net/qq_40116418/article/details/78768169

版权

前端学习小案例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#table {
				width: 630px;
			}
		</style>
	</head>

	<body>

		<div class="top">
			用户:<input type="text" id="username" /> 密码:
			<input type="text" id="passsword" /> 邮箱:
			<input type="text" id="email" />
			<input type="button" id="add" value="添加" />
			<input type="button" id="deleAll" value="批量删除" />
		</div>
		<table border="1px" cellspacing="0px" cellpadding="0px" id="table">
			<tr>
				<td><input type="checkbox" id="top_cb" /></td>
				<td>有户名</td>
				<td>密码</td>
				<td>邮箱</td>
				<td>操作</td>
			</tr>
		</table>

		<script type="text/javascript">
			$("#add").click(function() {
				//验证
				var username = $("#username").val();
				if (username == "") {
					alert("用户名不能为空")
					return;
				}

				var passsword = $("#passsword").val();
				if (passsword.length > 6) {
					alert("密码长度不能大于6")
					return;
				}

				var email = $("#email").val();
				if (email.indexOf("@") == -1) {
					alert("邮箱格式不正确")
					return;
				}
				//添加到表格
				var tr = "<tr><td><input type='checkbox' name='cb'/></td><td>" + username + "</td><td>" + passsword + "</td><td>" + email + "</td><td><input type = 'button' value = '删除'  onclick='dele(this)'/></td></tr>";
				$("#table").append(tr);
			})

						function dele(t){
							
							t.parentNode.parentNode.remove();
							
						}
			

			$("#deleAll").click(function() {
				var cbs = $("input[type=checkbox]:checked");
				if(cbs.length==0){
					alert("请至少选择一个");
					return
				}
				for (var i =0;i<cbs.length;i++) {
					var cb = cbs[i];
					cb.parentNode.parentNode.remove();
				}
				
				if (cbs.length==1) {
					$("#table").empty();
				}
				
			})
			//全選/全不选
			var flag = true;
			$("#top_cb").click(function(){
					var cb = $("input[type=checkbox]");
					for (var i =0 ;i<cb.length;i++) {
						cb[i].checked = flag;
					}
					flag=!flag;
			})
		</script>

	</body>

</html>

窗台的花花

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery实现添加,批量删除,全选

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8">&l...
复制链接

扫一扫