<!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. Day09 -超级经典面试题：Ruby的a ||= b（or-equals）是什么意思呢？

    前情提要: 写了这一系列下来,发现Ruby有许多特别的方法.前几天提到String字串,并且接续着在第八天我们了解串接(concatenate)与插入interpolation#{}方法(就连加号+也 ...

  2. Linux系统常见的压缩与打包命令

    常见的压缩文件扩展名 1.*.Z          compress程序压缩的文件 2.*.gz         gzip程序压缩的文件 3..bz2        bzip2程序压缩的文件 4..t ...

  3. 基于WebGL架构的3D可视化平台ThingJS-搭建设备管理系统

    国内高层建筑不断兴建,它的特点是高度高.层数多.体量大.面积可达几万平方米到几十万平方米.这些建筑都是一个个庞然大物,高高的耸立在地面上,这是它的外观,而随之带来的内部的建筑设备也是大量的.为了提高设 ...

  4. Unity中建立文本保存数据

    public void CreateYunYD() { GameToolsManager.Instance.effectType = EFFECTTYPE.YunYD; CreateYunOrWu(& ...

  5. SocketIO Server

    package com.fd.socketio; import org.json.JSONObject; import com.corundumstudio.socketio.AckRequest; ...

  6. Bean method 'jdbcTemplate' not loaded because @ConditionalOnSingleCandidate

    springboot学习jdbcTemplate操作数据库的过程中,出现这个问题 后来发现是由于程序中有配置下面这个注解 @EnableAutoConfiguration(exclude = {Dat ...

  7. 52-python 画图二维

    Python--matplotlib绘图可视化知识点整理 1.折线图: import numpy as np import matplotlib.pyplot as plt from pylab im ...

  8. dos命令 创建数据库，建表，两表联查，三表联查（mysql---第一篇）

    首先打开mysql的控制台,输入密码进行登录  (ps:本文的mysql控制台,是运用的php的集成环境(phpstudy),点击运行,找到mysql命令行,直接打开就可以了) 登陆成功后,就可以进行 ...

  9. python AES加密 ECB PKCS5

    class AesEbc16:  # 按块的大小, 一块一块的加密, 明文和密文长度一样 def __init__(self): self.key = b"123qweqqqwerqwer& ...

  10. Sketch 画原型比 Axure 好用吗？为什么？

    对工具而言,个人觉得没有说哪个工具好用不好用之分,更重要一点,做设计的来讲什么时候用什么工具来提高工作效率,这个最重要.下面我也来讲讲这二款工具的不同之处: Axure算是原型工具里的 Old Sch ...