<!doctype html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>jq</title>

         <script src="jquery.min.js"></script>

         <style>

             #table{

                 border: 1px solid #abcdef;

                 border-collapse: collapse;

                 width: 600px;

             }

             tr{

                 height: 30px;

             }

             th,td{

                 border: 1px solid #abcdef;

                 text-align: center;

             }

             td a{

                 margin-right: 5px;

                 color: red;

             }

             .popDiv{

                 width: 500px;

                 padding: 10px;

                 border: 1px solid red;

                 position: absolute;

                 top: 100px;

                 left: 50%;

                 margin-right: -250px;

                 background: #fff;

                 display: none;

                 z-index: 4;

             }

             .popDiv p{

                 border-bottom: 1px solid black;

             }

         </style>

     </head>

     <body>

         <table id="table">

             <tbody>

                 <tr>

                     <th>姓名</th>

                     <th>年龄</th>

                     <th>职位</th>

                     <th>工资</th>

                     <th>操作</th>

                 </tr>

                 <tr>

                     <td>张三</td>

                     <td>23</td>

                     <td>前端工程师</td>

                     <td>6000</td>

                     <td><a href="#" class="view">查看</a><a href="#" class="del">删除</a><a href="#">修改</a></td>

                 </tr>

                 <tr>

                     <td>李四</td>

                     <td>23</td>

                     <td>前端工程师</td>

                     <td>6000</td>

                     <td><a href="#" class="view">查看</a><a href="#" class="del">删除</a><a href="#">修改</a></td>

                 </tr>

                 <tr>

                     <td>王五</td>

                     <td>23</td>

                     <td>前端工程师</td>

                     <td>6000</td>

                     <td><a href="#" class="view">查看</a><a href="#" class="del">删除</a><a href="#">修改</a></td>

                 </tr>

                 <tr>

                     <td>赵六</td>

                     <td>23</td>

                     <td>前端工程师</td>

                     <td>6000</td>

                     <td><a href="#" class="view">查看</a><a href="#" class="del">删除</a><a href="#">修改</a></td>

                 </tr>

             </tbody>

         </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="javascript:;" class="close">关闭</a>

         </div>

         <script>

             $('.view').click(function(){

                 var maskWidth = $(document).width();

                 var maskHeight = $(document).height();

                 //添加遮罩层

                 $('<div class="mask"></div>').appendTo($('body'));

                 $('div.mask').css({

                     'opacity':0.4,

                     'background':'#000',

                     'position':'absolute',

                     'left':0,

                     'top':0,

                     'width':maskWidth,

                     'height':maskHeight,

                     'z-index':2

                 });

                 var arr = [];

                 $(this).parent().siblings().each(function(){

                     arr.push($(this).text());

                 });

                 $('.popDiv').show().children().each(function(i){

                     $(this).children('span').text(arr[i]);

                 });

             });

             $('.close').click(function(){

                 $(this).parent().hide();

                 $('div.mask').remove();

             });

             $('.del').click(function(){

                 $(this).parents('tr').remove();

             });

         </script>

     </body>

 </html>

效果：

table增删改查操作--jq的更多相关文章

  1. (转)SQLite数据库增删改查操作

    原文:http://www.cnblogs.com/linjiqin/archive/2011/05/26/2059182.html SQLite数据库增删改查操作 一.使用嵌入式关系型SQLite数 ...

  2. 详谈easyui datagrid增删改查操作

    转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...

  3. 浅谈dataGridView使用，以及画面布局使用属性，对datagridview进行增删改查操作，以及委托使用技巧

        通过几天的努力后,对datagridview使用作一些简要的介绍,该实例主要运用与通过对datagridview操作.对数据进行增删改查操作时,进行逻辑判断执行相关操作.简单的使用委托功能,实 ...

  4. Android SQLite 数据库 增删改查操作

    Android SQLite 数据库 增删改查操作 转载▼ 一.使用嵌入式关系型SQLite数据库存储数据 在Android平台上,集成了一个嵌入式关系型数据库--SQLite,SQLite3支持NU ...

  5. python 全栈开发，Day124(MongoDB初识,增删改查操作,数据类型,$关键字以及$修改器,"$"的奇妙用法,Array Object 的特殊操作,选取跳过排序,客户端操作)

    一.MongoDB初识 什么是MongoDB MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介 ...

  6. MySQL数据库的权限问题操作及基本增删改查操作

    前面我们讲了mysql的基本内容,现在我们详细的了解一下mysql中的具体操作. what's the SQl SQL(Structured Query Language 即结构化查询语言) SQL语 ...

  7. Ecmall二次开发-增删改查操作

    Ecmall二次开发-增删改查操作 Model目录includes/models 自己添加需要的model class OrdercomplainModel extends BaseModel //类 ...

  8. TP5.1：数据库的增删改查操作（基于面向对象操作）

    我们现实中对数据库的增删改查操作,都是使用模型类进行操作的(表名::),也就是面向对象操作,只有底层的代码用的是数据库操作(Db::table('表名')) 下面我将贴出模型类进行的增删改查操作,通过 ...

  9. Python进阶----表与表之间的关系(一对一,一对多,多对多),增删改查操作

    Python进阶----表与表之间的关系(一对一,一对多,多对多),增删改查操作,单表查询,多表查询 一丶表与表之间的关系 背景: ​ ​ ​  ​ ​ 由于如果只使用一张表存储所有的数据,就会操作数 ...

随机推荐

  1. Unity UGUI 小知识

    1.有个控件叫Selectable 这个控件在button,slider等身上有,也可以自行添加,可通过API搜索所有带这个控件的物体统一控制. 2.实现ScrollView只使用Scrollbar操 ...

  2. EXPRESS项目PM2启动NODE_ENV传参数不生效问题解决方法

    expree项目开发完,涉及到不同环境,要在启动到时候就要配置好环境变量, packge.json文件如下: "scripts": { "dev": " ...

  3. git--创建空的分支

    背景:项目进行中,需要创建一个空分支.在Git中创建分支,是必须有一个父节点的,也就是说必须在已有的分支上来创建新的分支,如果你的工程已经进行了一段时间,这个时候是无法创建空分支的. 解决方法: 使用 ...

  4. 学习TestNG，乍暖还寒冷时

    时间:2019年2月23日,农历正月十九,星期六,天气晴,略有阳光,但下午三点多就不见阳光了. 地点:上海 昨夜雨疏风骤,浓睡不消残酒.试问卷帘人,却道海棠依旧.知否?知否?应是绿肥红瘦 是的,魔都上 ...

  5. springmvc 跳转页面或者返回json

    方法的返回使用ModelAndView,分别new两个modelAndView,返回json的 是ModelAndView mv = new ModelAndView(new MappingJacks ...

  6. Debian如何永久添加静态路由

    在RedHat(RHEL)/CentOS/Fedora Linux环境永久添加静态路由通常是写在诸如/etc/sysconfig/network-scripts/route-eth0这些文件里.在De ...

  7. Java第一周作业

    Java第一周作业 本周作业: 参考<<教材学习指导(http://www.cnblogs.com/rocedu/p/7911138.html)) 学习第一章视频 参考<<使用 ...

  8. Unity3D 物体移动方法总结

    1. 简介 在Unity3D中,有多种方式可以改变物体的坐标,实现移动的目的,其本质是每帧修改物体的position. 2. 通过Transform组件移动物体 Transform 组件用于描述物体在 ...

  9. es6对象的扩展

    对象(object)是 JavaScript 最重要的数据结构之一. object 在es6中新增了很多便利的方法 在es6中允许直接写入变量和方法的名称直接作为对象的属性 let x =1 ,y=2 ...

  10. eclipse Filter web.xml 问题解决 异步请求@WebServlet

    <filter> <filter-name>AsynServlete</filter-name> <filter-class>com.kad.app.a ...