jQuery动态添加和删除

最新推荐文章于 2023-05-30 19:39:52 发布

编程微刊

最新推荐文章于 2023-05-30 19:39:52 发布

阅读量204

点赞数

本文链接：https://blog.csdn.net/qq_38822390/article/details/90402441

版权

1：点击添加按钮弹出弹框，form表单可以填写相关的信息
2：点击保存按钮，相关信息会显示在界面的列表里

3：鼠标滑动界面列表的标签，会出现删除按钮的图标，点击删除成功

4：代码如下，可以根据需要自行修改（可能会有多余的代码，但是不会影响效果）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style>
			#div_add {
				background: #66b7f9;
				color: #ffffff;
				border: none;
				display: block;
				height: 30px;
				margin: 20px 0;
			}
			
			#div_body p {
				height: 40px;
				border: 1px solid #c0c0c0;
				line-height: 40px;
				text-align: center;
			}
			
			#div_body img {
				width: 18px;
				height: 18px;
				margin-top: 9px;
				float: right;
			}
			
			#div_body p:hover {
				background: #66b7f9;
				color: #ffffff;
			}
			
			.leftpage {
				height: 500px;
				background: #ffffff;
			}
			
			#adduse {
				display: none;
				width: 500px;
				height: 300px;
				border: 1px solid #c0c0c0;
				background: #ffffff;
				position: absolute;
				left: 50%;
				top: 20%;
			}
			
			#adduse p {
				padding-left: 15px;
			}
			
			.addusep {
				background: #f2f2f2;
				height: 30px;
				line-height: 30px;
				padding-left: 5px;
			}
			
			#adduse p:nth-child(2) {
				padding-top: 25px;
			}
			
			#adduse p:nth-child(6) {
				padding-bottom: 25px;
			}
			
			#cancle {
				margin-left: 66px;
				background: #428bca;
				color: #ffffff;
				border: none;
				width: 60px;
				height: 30px;
			}
			
			#save {
				margin-left: 36px;
				background: #428bca;
				color: #ffffff;
				border: none;
				width: 60px;
				height: 30px;
			}
		</style>
	</head>

	<body>
		<!-- 左侧分页加载 -->
		<div class="col-md-5  col-xs-5 leftpage">
			<button id="div_add">添加</button>
			<div id="div_body">

			</div>

			<!--添加界面-->
			<form id="adduse">
				<p class="addusep">新增车间</p>
				<div class="">

					<p>
						车间名称: <input type="text" placeholder="请输入车间名称" />
					</p>
					<p>菜单选项</p>
					<p>
						<input type="radio" />接待区域
					</p>
					<p>
						<input type="radio" />提车区域
					</p>
					<p>
						<input type="radio" />维修区域
					</p>

					<input type="button" value="取消" id="cancle" /> <input type="button" value="保存" id="save" />
				</div>

			</form>
		</div>
	</body>
	<script>
		$("#div_add").click(function() {
			$('#adduse').show();
		})

		$("#cancle").click(function() {
			$('#adduse').hide();
		})
		$("#save").click(function() {
			$('#adduse').hide();
			$("#div_body").append("<p class='status'>钣金<img onclick='delRow(this)'  src='img/delete.png'/></p>")
		})

		/* 删除 */
		function delRow(obj) {
			$(obj).parent().remove();
			alert("删除成功")

		}
	</script>
</html>

原文作者：祈澈姑娘关注「编程微刊」公众号，在微信后台回复「领取资源」，获取IT资源300G干货大全。

编程微刊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery动态添加和删除

1：点击添加按钮弹出弹框，form表单可以填写相关的信息2：点击保存按钮，相关信息会显示在界面的列表里3：鼠标滑动界面列表的标签，会出现删除按钮的图标，点击删除成功4：代码如下，可以根据需要自行修改（可能会有多余的代码，但是不会影响效果）<!DOCTYPE html><html> <head> <meta charset="UTF-8...
复制链接

扫一扫