<!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. Linux 添加中文字体库，解决Java 生成中文水印不显示问题

    本机 Windows 环境测试以下代码生成中文水印完全没问题,但是发布到Linux下不显示,一开始以为是报错了没打印出来,搜索发现直接提示中文乱码的或者不显示的,才明白原来是字体库原因,于是开始解决这 ...

  2. Ubuntu iso下载地址（14、16、18）

    Ubuntu镜像,快速下载 ubuntu 14.04: http://mirrors.aliyun.com/ubuntu-releases/14.04/ubuntu 16.04: http://mir ...

  3. python3安装pcap遇到的问题

    最近想在win7上安装pypcap,遇到了一下问题,现在大概总结一下: 直接使用pip install pypcap,提示pcap.h not found: 网上下载pypcap安装包,运行pytho ...

  4. PCIE错误分析

    前面的文章提到过,PCI总线中定义两个边带信号(PERR#和SERR#)来处理总线错误.其中PERR#主要对应的是普通数据奇偶校检错误(Parity Error),而SERR#主要对应的是系统错误(S ...

  5. jquery 入口函数

    jQuery 入口函数: $(document).ready(function(){ // 执行代码 }); 或者 $(function(){ // 执行代码 }); JavaScript 入口函数: ...

  6. python入门day01

      一.编程和编程语言 电脑的基本原理: #计算机通过高低电流表示二进制数的1和0,所以计算机识别的是电压的高低,准确地说是用电压表示的各种数据,即数字信号;其他的物理量必须通过传感器等设备转换成数字 ...

  7. pip 的简单使用

    pip3 install scrapy #安装包 pip3 uninstall scrapy #删除安装包 pip3 search 'packages_name'#搜索包 pip3 list  #列出 ...

  8. Vue 获取元素样式 元素高度

    看到这个问题我第一时间想的竟然是JS 不知道你是怎么想的 不过昨天有一个小哥哥 问我一个Vue的 哈哈哈 get了 我当时问他为什么不用JS获取 他说 这个性能更高 那我们来看看这个高性能的获取元素高 ...

  9. iOS.ObjC.__attribute__-directives

    __attribute__ Directives Reference 1. __attribute__ directives in Objective-C (AAAA+) (Read Again) h ...

  10. 《C++实践之路.pdf》源码

    > 源码下载方法 < >> 打开微信 >> 扫描下方二维码 >> 关注林哥私房菜 >> 输入对应编号获取百度网盘提取密码 全书源码[已更新完 ...