JQuery实现修改删除

最新推荐文章于 2022-09-02 20:01:56 发布

Xiao_Tommy

最新推荐文章于 2022-09-02 20:01:56 发布

阅读量690

点赞数

本文链接：https://blog.csdn.net/xiao_tommy/article/details/53187065

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>查看修改删除</title>
	<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<style>
	#table{
		border: 2px solid blue;
		border-collapse: collapse;
		width: 600px;
	}
	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>java工程师</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>