Jquery实现表格中的查看删除修改

浏览数：32 / 时间：2015年06月09日

首先我们在学习js的时候就有接触到表格中的一些操作，那么Jquery是一个兼容多浏览器的轻量级的javascript库，它的核心理念是写的更少，做的更多。

现在就用学到的Jquery来做一个表格中的查看删除修改感受一下Jquery的强大。

第一步：我们编写html页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>查看修改删除</title>
<link rel="stylesheet" type="text/css" href="table.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="table.js"></script>
</head>
<body>
<table id="table">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
		<th>职位</th>
		<th>工资</th>
		<th>操作</th>
	</tr>
	
    <tr>
		<td>张三</td>
		<td>24</td>
		<td>工程师</td>
		<td>8000</td>
		<td><a href="#" class="view">查看</a><a href="#" class="del">删除</a><a href="#">修改</a></td>
	 </tr>
	 
	 <tr>
		<td>李四</td>
		<td>29</td>
		<td>高级工程师</td>
		<td>12000</td>
		<td><a href="#" class="view">查看</a><a href="#" class="del">删除</a><a href="#">修改</a></td>
	 </tr>
	 <tr>
		<td>王五</td>
		<td>29</td>
		<td>项目经理</td>
		<td>12000+提成</td>
		<td><a href="#" class="view">查看</a><a href="#" class="del">删除</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>
</body>
</html>

第二步：编写样式

#table{
	border:1px solid #abcdef;
	border-collapse:collapse;
	width:600px;
}
tr{height:30px;}
th {
	border:1px solid #abcdef;	
}
td{		
	border:1px solid #abcdef;
	text-align:center;
}
td a{
     margin-right:5px ;
	color:#f00;
}
.popDiv{
	width:500px;
	padding:10px;
	border:1px solid red;
	position:absolute;
	left:50%;
	top:100px;
	background:#fff;
	display:none;
	z-index:4;
}
.popDiv p{
	border-bottom:1px solid red;
}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Jquery实现表格中的查看删除修改