1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>jq</title>
7 <script src="jquery.min.js"></script>
8 <style>
9 #table{
10 border: 1px solid #abcdef;
11 border-collapse: collapse;
12 width: 600px;
13 }
14 tr{
15 height: 30px;
16 }
17 th,td{
18 border: 1px solid #abcdef;
19 text-align: center;
20 }
21 td a{
22 margin-right: 5px;
23 color: red;
24 }
25 .popDiv{
26 width: 500px;
27 padding: 10px;
28 border: 1px solid red;
29 position: absolute;
30 top: 100px;
31 left: 50%;
32 margin-right: -250px;
33 background: #fff;
34 display: none;
35 z-index: 4;
36 }
37 .popDiv p{
38 border-bottom: 1px solid black;
39 }
40 </style>
41 </head>
42
43 <body>
44 <table id="table">
45 <tbody>
46 <tr>
47 <th>姓名</th>
48 <th>年龄</th>
49 <th>职位</th>
50 <th>工资</th>
51 <th>操作</th>
52 </tr>
53 <tr>
54 <td>张三</td>
55 <td>23</td>
56 <td>前端工程师</td>
57 <td>6000</td>
58 <td><a href="#" class="view">查看</a><a href="#" class="del">删除</a><a href="#">修改</a></td>
59 </tr>
60 <tr>
61 <td>李四</td>
62 <td>23</td>
63 <td>前端工程师</td>
64 <td>6000</td>
65 <td><a href="#" class="view">查看</a><a href="#" class="del">删除</a><a href="#">修改</a></td>
66 </tr>
67 <tr>
68 <td>王五</td>
69 <td>23</td>
70 <td>前端工程师</td>
71 <td>6000</td>
72 <td><a href="#" class="view">查看</a><a href="#" class="del">删除</a><a href="#">修改</a></td>
73 </tr>
74 <tr>
75 <td>赵六</td>
76 <td>23</td>
77 <td>前端工程师</td>
78 <td>6000</td>
79 <td><a href="#" class="view">查看</a><a href="#" class="del">删除</a><a href="#">修改</a></td>
80 </tr>
81 </tbody>
82 </table>
83
84 <div class="popDiv">
85 <p><strong>姓名：</strong><span></span></p>
86 <p><strong>年龄：</strong><span></span></p>
87 <p><strong>职位：</strong><span></span></p>
88 <p><strong>工资：</strong><span></span></p>
89 <a href="javascript:;" class="close">关闭</a>
90 </div>
91 <script>
92 $('.view').click(function(){
93 var maskWidth = $(document).width();
94 var maskHeight = $(document).height();
95 //添加遮罩层
96 $('<div class="mask"></div>').appendTo($('body'));
97 $('div.mask').css({
98 'opacity':0.4,
99 'background':'#000',
100 'position':'absolute',
101 'left':0,
102 'top':0,
103 'width':maskWidth,
104 'height':maskHeight,
105 'z-index':2
106 });
107
108 var arr = [];
109 $(this).parent().siblings().each(function(){
110 arr.push($(this).text());
111 });
112 $('.popDiv').show().children().each(function(i){
113 $(this).children('span').text(arr[i]);
114 });
115 });
116
117 $('.close').click(function(){
118 $(this).parent().hide();
119 $('div.mask').remove();
120 });
121
122
123 $('.del').click(function(){
124 $(this).parents('tr').remove();
125 });
126 </script>
127 </body>
128
129 </html>
效果：
