JQ 实现增删改查的思路

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="base.css" />
<script src="jquery-1.10.1.min.js" ></script>
<style>
#table {
	border: 2px solid blue;
	border-collapse: collapse;
	width: 600px;
	margin: 30px auto 0 auto;
}
tr {
	height: 30px;
}
th {
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}
td a {
	margin-left: 35px;
	color: red;
}
.popDiv {
	width: 500px;
	padding: 10px;
	border: 1px solid red;
	position: absolute;
	left: 50%;
	margin-left: -250px;
	top: 100px;
	background: white;
	display: none;
	z-index: 4;
}
.popDiv p {
	border-bottom: 1px solid red;
}
</style>
</head>
<body>
<table id="table">
<tr>
	<th>姓名</th>
	<th>年龄</th>
	<th>职位</th>
	<th>工资</th>
	<th>操作</th>
</tr>
<tr>
	<td>吴者然</td>
	<td>23</td>
	<td>前端工程师</td>
	<td>15000</td>
	<td>
		<a href="#" class="view">查看</a>
		<a href="#" class="delete">删除</a>
		<a href="#">修改</a>
	</td>
</tr>
<tr>
	<td>何开</td>
	<td>28</td>
	<td>ruby工程师</td>
	<td>12000</td>
	<td>
		<a href="#" class="view">查看</a>
		<a href="#" class="delete">删除</a>
		<a href="#">修改</a>
	</td>
</tr>
<tr>
	<td>暴天明</td>
	<td>30</td>
	<td>项目经理</td>
	<td>10000+提成</td>
	<td>
		<a href="#" class="view">查看</a>
		<a href="#" class="delete">删除</a>
		<a href="#">修改</a>
	</td>
</tr>
</table>
<div class="popDiv">
<p><strong>姓名</strong><span></span></p>
<p><strong>年龄</strong><span></span></p>
<p><strong>职位</strong><span></span></p>
<p><strong>工资</strong><span></span></p>
<a href="" class="close">关闭</a>
</div>
<script>
//查看
$('.view').click(function() {
	var maskHeight = $(document).height();
	var maskWidth = $(document).width();
	//添加遮盖层
	$('<div class="mask"></div>').appendTo($('body'));
	$('div.mask').css({
		'opacity': 0.4,
		'background': "gray",
		'position': 'absolute',
		'left': 0,
		'top': 0,
		'width': maskWidth,
		'height': maskHeight,
		'z-index': 2
	});
	var arr = [];
	$(this).parent().siblings().each(function() {
		arr.push($(this).text());
	});
	//alert(arr);
	$('.popDiv').show().children().each(function(i) {
		$(this).children('span').text(arr[i]);
	})
})
//关闭
$('.close').click(function() {
	$(this).parent().hide();
	$('.mask').remove();
})
//删除
$('.delete').click(function() {
	$(this).parents('tr').remove()
})
</script>
</body>
</html>
PS：因为添加和修改要连接数据库，通过数据库才能操作。其实，删除也是需要的。故添加和修改有时间再细聊聊。
效果图：
JQ 实现增删改查的思路

猜你喜欢
