纯jq编写增删改，弹出框
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#bgDiv {
position: absolute;
left: 0px;
top: 0px;
background-color: black;
opacity: 0.2; /*设置不透明度，即可以看到层下面的内容，但是由于层的遮挡，是不可以进行操作的*/
display: none;
}
#fgDiv {
position: absolute;
width: 300px;
height: 100px;
border: 1px solid red;
background-color: #e7e7e7;
display: none;
}
</style>
<script src="scripts/jquery-1.7.1.js"></script>
<script>
var list = [
{ id: '1', country: '中国', capital: '北京' },
{ id: '2', country: '美国', capital: '华盛顿' },
{ id: '3', country: '日本', capital: '东京' },
{ id: '4', country: '韩国', capital: '首尔' }
];
$(function () {
$('#btnAdd').click(function () {
//显示添加界面
$('#bgDiv').css('display', 'block').css('width', window.innerWidth + 'px').height(window.innerHeight+'px');
$('#fgDiv').css('display', 'block').css('left', (window.innerWidth - 300) / 2 + 'px').css('top', (window.innerHeight - 100) / 2 + 'px');
//清除文本框中的数据
$('#fgDiv :text,:hidden').val('');
});
//生成表格数据
$.each(list, function () {
$('<tr id="' + this.id + '">' +
'<td><input type="checkbox"/></td>' +
'<td>' + this.id + '</td>' +
'<td>' + this.country + '</td>' +
'<td>' + this.capital + '</td>' +
'<td><input type="button" value="修改"/></td>' +
'</tr>').appendTo('#list');
});
//为复选框chkAll设置点击事件，完成全选、全消的功能
$('#chkAll').click(function () {
//根据当前复选框的状态设置其它行复选框的状态
$('#list :checkbox').attr('checked', this.checked);
});
//反选
$('#btnReverse').click(function () {
//获取实际数据行的复选框
$('#list :checkbox').each(function () {//jquery对象.each
this.checked = !this.checked;
});
});
//删除选中项
$('#btnRemove').click(function () {
//提示
if (confirm('确定呀删除吗？')) {
//获取所有数据行中选中的checkbox
//$('#list :checked').parent().parent().remove();
//直接在祖宗节点中找到tr节点
$('#list :checked').parent().parent().remove();
}
});
//保存
$('#btnSave').click(function () {
var id = $('#hidId').val();
if (id == '')
{
$('<tr id="' + $('#txtId').val() + '">' +
'<td><input type="checkbox"/></td>' +
'<td>' + $('#txtId').val() + '</td>' +
'<td>' + $('#txtCountry').val() + '</td>' +
'<td>' + $('#txtCapital').val() + '</td>' +
'<td><input type="button" value="修改"/></td>' +
'</tr>').appendTo('#list').find(':button').click(function () {//为修改按钮绑定事件
//显示添加界面
$('#bgDiv').css('display', 'block')
.css('width', window.innerWidth + 'px')
.height(window.innerHeight + 'px');
$('#fgDiv').css('display', 'block')
.css('left', (window.innerWidth - 300) / 2 + 'px')
.css('top', (window.innerHeight - 100) / 2 + 'px');
//找到当前按钮所在td的之前的所有td，因为数据就在这些td中
var tds = $(this).parent().prevAll();
//设置文本框的值
$('#hidId').val(tds.eq(2).text());//作用：在修改后用于查找原始数据的行
$('#txtId').val(tds.eq(2).text());
$('#txtCountry').val(tds.eq(1).text());
$('#txtCapital').val(tds.eq(0).text())
});
}
else {
var tds = $('#' + id + '>td');
tds.eq(1).text($('#txtId').val());
tds.eq(2).text($('#txtCountry').val());
tds.eq(3).text($('#txtCapital').val());
//改tr的id属性，保持数据一致
$('#' + id).attr('id', $('#txtId').val());
}
//隐藏层
$('#bgDiv').css('display', 'none');
$('#fgDiv').css('display', 'none');
});
//修改
$('#list :button').click(function () {
//显示添加界面
$('#bgDiv').css('display', 'block')
.css('width', window.innerWidth + 'px')
.height(window.innerHeight + 'px');
$('#fgDiv').css('display', 'block')
.css('left', (window.innerWidth - 300) / 2 + 'px')
.css('top', (window.innerHeight - 100) / 2 + 'px');
//找到当前按钮所在td的之前的所有td，因为数据就在这些td中
var tds = $(this).parent().prevAll();
//设置文本框的值
$('#hidId').val(tds.eq(2).text());//作用：在修改后用于查找原始数据的行
$('#txtId').val(tds.eq(2).text());
$('#txtCountry').val(tds.eq(1).text());
$('#txtCapital').val(tds.eq(0).text());
});
});
</script>
</head>
<body>
修改操作：1、将原有数据展示在div中；2、点击保存时，需要知道对应表格中的哪行数据；3、为新增的修改按钮绑定事件
<br />
难点：在第2步中，如何在点击div中按钮时，知道对应原表格中的哪行数据
<hr />
<input type="button" id="btnAdd" value="添加" />
<input type="button" id="btnReverse" value="反转" />
<input type="button" id="btnRemove" value="删除选中项" />
<table border="1">
<thead>
<th width="100"><input type="checkbox" id="chkAll" />全选</th>
<th width="100">编号</th>
<th width="100">国家</th>
<th width="100">首都</th>
<th width="100">修改</th>
</thead>
<tbody id="list"></tbody>
</table>
<div id="bgDiv">
</div>
<div id="fgDiv">
<input type="hidden" id="hidId" />
编号：<input type="text" id="txtId" />
<br />
国家：<input type="text" id="txtCountry" />
<br />
首都：<input type="text" id="txtCapital" />
<br />
<input type="button" id="btnSave" value="保存" />
</div>
</body>
</html>
纯jq编写增删改，弹出框的更多相关文章
- jq实现点击弹出框代码
废话不多说,先贴代码吧 <script> function showBg() { //定义 showBg 函数 var bh = $("body").height(); ...
- JQ 确定与取消弹出框，选择确定执行Ajax
$(function () { $("#GetCoupon").click(function () { function del() { var msg = "请确定领取 ...
- 在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计
在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今 ...
- 在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建
通常,在同一个页面上实现增删改查,会通过弹出框实现异步的添加和修改,这很好.但有些时候,是不希望在页面上弹出框的,我们可能会想到Knockoutjs,它能以MVVM模式实现同一个页面上的增删改查,再辅 ...
- 如何使用纯js实现一个带有灰色半透明背景的弹出框
原文如何使用纯js实现一个带有灰色半透明背景的弹出框 // 加入透明背景 var body = document.body;var backgroundDiv = document.createEle ...
- bootstrap弹出框提示框无法调用
使用bootstrap的js插件真的很好用啊有木有!! 但是第一次使用这个弹出框跟提示框的时候就被打击了,没有反应啊!! 然而这并不是一个大问题,一句话搞定,看代码: //首先是工具提示: $(fun ...
- 弹出框JBox实例
前几天做的考试系统的一些后台弹出框的一些模板.主要是因为普通的弹出框样式不是很好,颜色也不能调换.这里我们用的是JBox,还是从师傅那得知的.自己小实验了下,这里就做个小结. JBox 插件说明 - ...
- 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
- 如何使用angular-ui的弹出框
在开发项目时,我们经常性的会遇到弹出框的需求,例如登陆,注册,添加信息等等....面对这一需求,我们当然也可以使用自己的双手进行编写,如果你时间充足可以试试. 今天我们讲解一下如何在angular框架 ...
随机推荐
- hdu 1689 Just a Hook
http://acm.hdu.edu.cn/showproblem.php?pid=1698 Just a Hook Time Limit: 4000/2000 MS (Java/Others) ...
- [iOS基础控件 - 6.10.3] DatePicker & UIToolBar
A.需求 1. 学习DatePicker的基本配置 2.使用TextField召唤指定类型的输入键盘View,这里使用DatePicker 3.给输入键盘上方加上一个UIToolBar,实现如关闭键盘 ...
- [iOS基础控件 - 6.9.2] 静态单元格 QQ功能列表
使用storyboard设计静态的表格数据 A.实现步骤 1.控制器继承UITableViewController 2.在storyboard中使用TableViewController,删除原来 ...
- 在Tomcat上运行ADF Essentials应用
Tomcat 7.0.32,Oracle ADF Essentials 12.1.2 Oracle ADF Essentials是Oracle ADF框架的免费版本.Oracle ADF essent ...
- 学习微软中间语言(MSIL)的绝佳工具 Dotnet IL Editor 推荐
Dotnet IL Editor是一款.NET平台反编译工具,可以反编译.NET程序集文件为IL代码,并且可以执行,调试反编译后生成的IL代码.它的设计出发点比较直观,新建一个项目,添加程序集文件,设 ...
- kaptcha验证码插件的使用
kaptcha 是一个非常实用的验证码生成工具.有了它,你可以生成各种样式的验证码,因为它是可配置的.kaptcha工作的原理是调用 com.google.code.kaptcha.servlet.K ...
- java web，生成验证码图片的技术
偶然知道原来有些网站的验证码图片都是随机生成的,后来听人讲了一下,就做了这个小例子 生成图片,绘制背景,数字,干扰线用到了java.awt包,主要使用BufferedImage来生成图片,然后使用Gr ...
- hdu 2553 N皇后问题 (经典DFS)
题目链接:点击链接 思路:用一维数组hang[num] = i,num表示第num行,i表示第i列,计算n = 1~10皇后的不同放置数量,然后打表 #include<stdio.h> # ...
- squid添加用户名密码认证
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...
- cc2530 makefile简略分析 <contiki学习之三>
前面将contiki的makefile框架都理了下,这篇就以cc2530为收篇吧,也即makefile分析就该到此为止了. contiki/examples/cc2530dk 打开Makefile如下 ...