JQ's idea of adding, deleting, modifying and checking

<!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>Name</th>
	<th>Age</th>
	<th>Job</th>
	<th>Wage</th>
	<th>Action</th>
</tr>
<tr>
	<td>Wu Zheran</td>
	<td>23</td>
	<td>Front-end Engineer</td>
	<td>15000</td>
	<td>
		<a href="#" class="view">查看</a>
		<a href="#" class="delete">删除</a>
		<a href="#">修改</a>
	</td>
</tr>
<tr>
	<td>He Kai</td>
	<td>28</td>
	<td>ruby engineer</td>
	<td>12000</td>
	<td>
		<a href="#" class="view">查看</a>
		<a href="#" class="delete">删除</a>
		<a href="#">修改</a>
	</td>
</tr>
<tr>
	<td>Blizzard</td>
	<td>30</td>
	<td>Project Manager</td>
	<td>10000+Commission</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>
//Check
$('.view').click(function() {
	var maskHeight = $(document).height();
	var maskWidth = $(document).width();
	//add cover layer
	$('<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]);
	})
})
//closure
$('.close').click(function() {
	$(this).parent().hide();
	$('.mask').remove();
})
//delete
$('.delete').click(function() {
	$(this).parents('tr').remove()
})
</script>
</body>
</html>

PS: Because adding and modifying needs to connect to the database, it can only be operated through the database. In fact, deletion is also required. Therefore, adding and modifying has time to discuss in detail.

Effect picture:

JQ's idea of adding, deleting, modifying and checking

Guess you like