table增删改查操作--jq
<!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的更多相关文章
- (转)SQLite数据库增删改查操作
原文:http://www.cnblogs.com/linjiqin/archive/2011/05/26/2059182.html SQLite数据库增删改查操作 一.使用嵌入式关系型SQLite数 ...
- 详谈easyui datagrid增删改查操作
转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...
- 浅谈dataGridView使用，以及画面布局使用属性，对datagridview进行增删改查操作，以及委托使用技巧
通过几天的努力后,对datagridview使用作一些简要的介绍,该实例主要运用与通过对datagridview操作.对数据进行增删改查操作时,进行逻辑判断执行相关操作.简单的使用委托功能,实 ...
- Android SQLite 数据库 增删改查操作
Android SQLite 数据库 增删改查操作 转载▼ 一.使用嵌入式关系型SQLite数据库存储数据 在Android平台上,集成了一个嵌入式关系型数据库--SQLite,SQLite3支持NU ...
- python 全栈开发，Day124(MongoDB初识,增删改查操作,数据类型,$关键字以及$修改器,"$"的奇妙用法,Array Object 的特殊操作,选取跳过排序,客户端操作)
一.MongoDB初识 什么是MongoDB MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介 ...
- MySQL数据库的权限问题操作及基本增删改查操作
前面我们讲了mysql的基本内容,现在我们详细的了解一下mysql中的具体操作. what's the SQl SQL(Structured Query Language 即结构化查询语言) SQL语 ...
- Ecmall二次开发-增删改查操作
Ecmall二次开发-增删改查操作 Model目录includes/models 自己添加需要的model class OrdercomplainModel extends BaseModel //类 ...
- TP5.1：数据库的增删改查操作（基于面向对象操作）
我们现实中对数据库的增删改查操作,都是使用模型类进行操作的(表名::),也就是面向对象操作,只有底层的代码用的是数据库操作(Db::table('表名')) 下面我将贴出模型类进行的增删改查操作,通过 ...
- Python进阶----表与表之间的关系(一对一,一对多,多对多),增删改查操作
Python进阶----表与表之间的关系(一对一,一对多,多对多),增删改查操作,单表查询,多表查询 一丶表与表之间的关系 背景: 由于如果只使用一张表存储所有的数据,就会操作数 ...
随机推荐
- vo与po
场景: 控制层使用vo对象,数据层使用po对象,业务层负责将po对象转换成vo对象传递给控制层 vo和po对象之间转换可以用BeanUtils.copyProperties(vo, po);方法 如果 ...
- CSS 图像左右对齐
左右对齐图像使用的技术是浮动div元素. float:left 左对齐 float:right右对齐 示例 <!DOCTYPE html> <html> <hea ...
- ES6你不知道的let关键字及变量的提升
一.JavaScript变量创建到访问赋值的过程 创建 create/declare 初始化 initialize 赋值 assign 1.函数的提升 // 函数这种变量声明,首先会创建变量,再初始化 ...
- Sprite(雪碧图)的应用
雪碧图是根据CSS sprite音译过来的,是将很多很多的小图标放在一张图片上. 使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多的小图标,浏览器在显示页面的 ...
- MongoDB - 1
MongoDB - 1 一.初识MongoDB 之 什么东西都得先从理论入手,你说是不是啊? MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展 ...
- Python开发【第十一篇】：Python操作MySQL
本篇对于Python操作MySQL主要使用两种方式: 1.原生模块pymsql. 2.ORM框架SQLAchemy. pymsql pymsql是Python中操作MySQL的模块,其使用方法和MyS ...
- Redis分布式缓存
Redis 主 slave 数据库优化-- 加inex, 分区 JVM调优--参数设置,比如偏向于计算的如何设置? 线程池:queue放满了之后,有什么方式能让他不拒绝掉?blockqueue就等在那 ...
- angular4模块中标签添加背景图
一.现象 一个全屏的“走马灯”每项需要添加背景图,在循环标签里需要动态添加行内样式 二.解决 1.首先有一个图片数组,如: export class AppComponent { array = [& ...
- 基于SoftRoCE 了解RDMA
RDMA是基于IB技术的内存直接传送,无需内核参与,硬件网卡搞定.IB需要HPC领域的专用硬件,ROCE则是RDMA协议在普通以太网卡的实现,RoCEv1是在MAC上的二层封装,局域网内可以,要通过路 ...
- Texture转Texture2D
private Texture2D TextureToTexture2D(Texture texture) { Texture2D texture2D = new Texture2D(texture. ...