JQuery实现修改删除

来源：互联网发布：苹果54g网络破解编辑：程序博客网时间：2024/06/11 12:40
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>查看修改删除</title><script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><style>#table{border: 2px solid blue;border-collapse: collapse;width: 600px;}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>java工程师</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>
0 0