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>
效果：
