JQuery学习之动态增加删除

JQuery学习之动态增加删除_第1张图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery学习</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0
			}
			.container{
				width: 300px;
				margin: 100px auto 0;
			}
			table {
			    border-collapse: collapse;
			    border: 1px solid #c0c0c0;
				margin: 0 auto;
			}
			th,td {
			    border: 1px solid #d0d0d0;
			    padding: 17px;
			}
			th {
			    background-color: #09c;
			    font: bold 16px "微软雅黑";
			    color: #fff;
			}
			td {
			    font: 14px "微软雅黑";
			}
			a{
				text-decoration: none;
			}
			.btnAdd {
			    width: 100px;
			    height: 30px;
			    font-size: 20px;
			    font-weight: bold;
			}
			.form-item {
			    height: 100%;
			    position: relative;
			    padding-left: 100px;
			    padding-right: 20px;
			    margin-bottom: 34px;
			    line-height: 36px;
			}
			.form-item > .lb {
			    position: absolute;
			    left: 0;
			    top: 0;
			    display: block;
			    width: 100px;
			    text-align: right;
			}
			.form-item > .txt {
			    width: 300px;
			    height: 32px;
			}
			.mask{
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				background: #000;
				opacity: 0.6;
				display: none;
			}
			#hideFormAdd {
			    width: 22px;
			    height: 22px;
			    cursor: pointer;
			    text-align: center;
			    line-height: 22px;
			    font-size: 18px;
			}
			
			#hideFormAdd:hover {
			    background-color: skyblue;
			}
			
			.form-add {
			    position: fixed;
			    top: 25%;
			    left: 34.5%;
			    padding-bottom: 20px;
			    background: #fff;
			    display: none;
			}
			
			.form-add-title {
			    background-color: #f7f7f7;
			    border-width: 1px 1px 0 1px;
			    border-bottom: 0;
			    margin-bottom: 15px;
			    position: relative;
			}
			
			.form-add-title span {
			    width: auto;
			    height: 18px;
			    font-size: 16px;
			    font-family: 宋体;
			    font-weight: bold;
			    color: rgb(102, 102, 102);
			    text-indent: 12px;
			    padding: 8px 0px 10px;
			    margin-right: 10px;
			    display: block;
			    overflow: hidden;
			    text-align: left;
			}
			
			.form-add-title div {
			    width: 16px;
			    height: 20px;
			    position: absolute;
			    right: 10px;
			    top: 6px;
			    font-size: 30px;
			    line-height: 16px;
			    cursor: pointer;
			}
			
			.form-submit {
			    text-align: center;
			}
			
			.form-submit input {
			    width: 170px;
			    height: 32px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<input class="btnAdd" type="button" value="添加数据" />
		</div>
		<table>
			<thead>
				<tr>
					<th>课程名称</th>
					<th>所属学院</th>
					<th>是否删除</th>
				</tr>
			</thead>
			<tbody class="tbd">
				<tr>
				    <td>JavaScript</td>
				    <td>酱菜学院</td>
				    <td><a href="javascrip:;" class="get">delete</a></td>
				</tr>
				<tr>
				    <td>css</td>
				    <td>酱菜学院</td>
				    <td><a href="javascrip:;" class="get">delete</a></td>
				</tr>
				<tr>
				    <td>html</td>
				    <td>酱菜学院</td>
				    <td><a href="javascrip:;" class="get">delete</a></td>
				</tr>
				<tr>
				    <td>jQuery</td>
				    <td>酱菜学院</td>
				    <td><a href="javascrip:;" class="get">delete</a></td>
				</tr>
			</tbody>
		</table>
		<!--遮罩层-->
		<div class="mask"></div>
		<!--添加数据的表单-->
		<div class="form-add">
			<div class="form-add-title">
			    <span>添加数据</span>
			    <div id="hideFormAdd">×</div>
			</div>
			<div class="form-item">
			    <label class="lb">课程名称:</label>
			    <input class="txt" id="txt1" type="text" placeholder="请输入课程名称">
			</div>
			<div class="form-item">
			    <label class="lb">所属学院:</label>
			    <input class="txt" id="txt2" type="text" placeholder="请输入所属学院">
			</div>
			<div class="form-submit">
			    <input type="button" value="添加" id="btnAdd1">
			</div>
		</div>
	</body>
</html>
<script src="./js/jquery.min.js"></script>
<script>
	$(function(){
		$('.btnAdd').click(function(){
			$('.mask').show();
			$('.form-add').show();
		})
		
		$('#hideFormAdd').click(function(){
			$('.mask').hide();
			$('.form-add').hide();
		})
		
		$('#btnAdd1').click(function(){
			var txt1 = $('#txt1').val();
			var txt2 = $('#txt2').val();
			var trNew = $(
			'' +
				''+txt1+''+
				''+txt2+'' +
				'delete' +
			''
			);
			//给新创建的这个$trNew里面的a标签添加一个事件.
			trNew.find('.get').click(function(){
				trNew.remove();
			})
			$('.tbd').append(trNew);
			$('#hideFormAdd').click();
		})
		
		$('.get').click(function(){
			$(this).parent().parent().remove();
		})
	});
</script>

你可能感兴趣的:(JQuery,jquery)