table增删改查操做--jq

时间 2019-11-21 标签 table 增删
  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>
效果：javascript