<!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. 搭建redis-sentinel(哨兵机制)集群

    redis怎么才能做到高可用 对于redis主从架构,slave可以对应多个本身可以保障高可用,但是对于一个master节点,如果宕机,整个缓存系统就无法进行写的操作,显然整个系统会无法做到高可用 s ...

  2. Codeforces Round #436 B. Polycarp and Letters

    题意:给你一串长度为n的字符,由大小写字母组成,求连续的小写子串中不同字母个数的最大值. Input 11aaaaBaabAbA Output 2 Input 12zACaAbbaazzC Outpu ...

  3. TestNG实现用例运行失败自动截图（转载）

    转载自:https://blog.csdn.net/galen2016/article/details/70193684 重写Listener的onTestFailure方法 package com. ...

  4. 写一个小CTF平台

    0x00.前言 协会要举办信息安全大赛了,初赛的web+crypto+misc主要由我来出题,注册.比赛的平台也都要由我来写    上周日完成了注册页面的后端(前端由另一个女生写的),前天下午大概完成 ...

  5. pwnable.kr-col-witeup

    和上道题类似,先看看col.c代码呗. 欧克,此程序可以查看flag内容,下载下来慢慢分析. 好叭,他是要输入20个字节,然后每4个字节分块这样相加,结果和0x21DD09EC比较. 先验尝试可知,不 ...

  6. json转换对象中出现null属性的解决方法

    前言:当数据进行json转换时,当属性值为null时,json解析就会中断,导致接下来的数据无法正确获取.原则上来讲服务器端发送的json字符串不允许存在属性值为空的情况,但是如果服务器端发送了nul ...

  7. logistics回归理解

    多元回归方程:假设有一个因变量y和一组自变量x1, x2, x3, ... , xn,其中y为连续变量,我们可以拟合一个线性方程: y =β0 +β1*x1 +β2*x2 +β3*x3 +...+βn ...

  8. tiny4412--linux驱动学习(1)

    1,概述 linux设备驱动分为三种:字符驱动设备.块驱动设备.网络设备 架构: 1,字符设备驱动 是指只能一个字节一个字节读写的设备,不能随机读取设备内存中的某一数据,读取数据需要按照先后数据.字符 ...

  9. Newtonsoft.Json 你必须知道的一些用法

    最近在做接口开发,对方团队开发了一个Web API 的接口,传输数据的格式是 JSON.当时看到这个东西,感觉很简单,也没想什么,没用多久就完成了我的功能,我完成的功能很简单,就是获取数据,然后把数据 ...

  10. sourcetree 跳过首次登录

    定位到用户缓存数据目录:(需要在文件夹选项中 开启不隐藏文件夹和不隐藏文件扩展名) 一般为: C:\Users\{用户名}\AppData\Local\Atlassian 进入sourcetree目录 ...