<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="base.css" /> <script src="jquery-1.10.1.min.js" ></script> <style> #table { border: 2px solid blue; border-collapse: collapse; width: 600px; margin: 30px auto 0 auto; } 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>ruby工程师</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>
PS:因为添加和修改要连接数据库,通过数据库才能操作。其实,删除也是需要的。故添加和修改有时间再细聊聊。
效果图: