标签：jquery javascript css
首先我们在学习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 javascript css
原文地址：http://blog.csdn.net/mqplw/article/details/41580067
