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进阶----表与表之间的关系(一对一,一对多,多对多),增删改查操作,单表查询,多表查询 一丶表与表之间的关系 背景: 由于如果只使用一张表存储所有的数据,就会操作数 ...
随机推荐
- document.compatMode 浏览器渲染模式判定利器
在加了DOCTYPE的页面document.compatMode输出CSS1Compat,不管加的是XHTML的还是HTML5的DOCTYPE.没有加的输出BackCompat. BackCompat ...
- 解决IIS配置问题
解决网站运行一段时间会变慢的问题 http://blog.csdn.net/rryqsh/article/details/8156558 1. IIS 7 应用程序池自动回收关闭的解决方案 如果你正在 ...
- selenium java 浏览器操作
环境搭建 selenium 2.53 selenium-java-2.53.0.jar selenium-java-2.53.0-srcs.jar 原代码包 拷贝的工程lib下,做build path ...
- TCP(一)
传输控制协议TCP特点:1,面向连接的运输层协议 2,每一条TCP只能有两个端点.点对点 3,TCP是可靠的,无差错,不重复,顺序到达. 4,全双工,允许通信 ...
- JVM学习03：性能监控工具
JVM学习03:性能监控工具 写在前面:本系列分享主要参考资料是 周志明老师的<深入理解Java虚拟机>第二版. 性能监控工具知识要点Xmind梳理 案例分析 案例分析1-JPS 案例分 ...
- CentOS7+CDH5.14.0安装全流程记录，图文详解全程实测-1虚拟机安装及环境初始化
1.软件准备: VMware-workstation-full-14.1.2-8497320.exe CentOS-7-x86_64-DVD-1804.iso 2.VMare激活码: AU5WA-0E ...
- Spring MVC相关
配置文件说明 web.xml, spring配置文件 applicationContext.xml, spring配置文件, mybatis连接mysql配置文件 sql-map-config-mys ...
- Codeforces Round #552 (Div. 3) F题
题目网址:http://codeforces.com/contest/1154/problem/F 题目大意:给出n,m,k,n是物体的个数,m是优惠方式的种数,k是需要购买的物体个数, 然后给出n个 ...
- 谈谈逆向android里面的so
1. 加密sgf算法分析 2.gnugo瘦身记
- 配置Linux客户端使用socks5代理上网
配置Linux客户端使用socks5代理上网 背景 有访问google或者其他海外网站需求的同学可能大都用过或者听过ss,在Windows.Mac.Android.IOS都有现成可用的客户端来协助 ...