<!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. spring、mybatis事务配置和控制

    springmybatis.xml <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi= ...

  2. （项目六）Mha-Atlas-MySQL高可用方案实践

    mha-mysql环境准备: 三台虚拟机,都安装了mysql,都关闭防火墙和selinux,同时在每台虚拟机上都做映射 软件包 1) mha管理节点安装包: mha4mysql-manager-0.5 ...

  3. python的django基础篇

    一.Django基础 Django 是用Python开发的一个免费开源的Web框架,可以用于快速搭建高性能,优雅的网站! Django的特点: 强大的数据库功能:拥有强大的数据库操作接口(QueryS ...

  4. 微信小程序--录音

    var app = getApp(), $ = require("../../utils/util.js"); const recorderManager = wx.getReco ...

  5. react 关闭eslint 配置

    在 package.json 中修改为一下 "eslintConfig": { "extends": "react-app", " ...

  6. unity中给图片换颜色

    slot边框.color = new Color32 (93,165,255,255);

  7. 9. maps

    C++有vertor,java有HashMap,C语言想使用则需要自行封装,不同的类型还需要再封装,特别麻烦. 看看Go语言的map的使用方法:var member map[string]int,创建 ...

  8. Ubuntu 通过apt安装VSCode

    1. sudo vim /etc/apt/sources.list.d/vscode.list 并向里面添加:deb [arch=amd64] http://packages.microsoft.co ...

  9. hbase基础建表语句

    在Hadoop目录下的HBASE下执行命令 ./hbase shell 进入hbase环境 创建hbase 数据库表 create "表名", "字段A",&q ...

  10. LinkedStack

    public class LinkedStack<T> { private static class Node<U>{ U item; Node<U>next; N ...