jQuery练习 | 模态对话框（添加删除）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.modal{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -250px;
background-color: #eeeeee;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
background-color: black;
z-index: 9;
}
</style>
</head>
<body>
<a onclick="addElement();">添加</a>
<table border="1" id="tb">
<tr>
<td target="hostname">1.1.1.11</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.12</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.13</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.14</td>
<td target="port">80</td>
<td target="ip">80</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text" />
<input name="port" type="text" />
<input name="ip" type="text" />
</div>
<div>
<input type="button" value="取消" onclick="cancelModal();" />
<input type="button" value="确定" onclick="confirmModal();" />
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.del').click(function () { //删除事件：匹配到标签并删除掉此标签
$(this).parent().parent().remove();
});
function confirmModal() { //确认按钮：添加数据到表格
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = "11.11.11.11";
var td2 = document.createElement('td');
td2.innerHTML = "8001";
$(tr).append(td1);
$(tr).append(td2);
$('#tb').append(tr);
$(".modal,.shadow").addClass('hide');
// $('.modal input[type="text"]').each(function () {
// // var temp = "<td>..."
//
//
//
// })
}
function addElement() { //添加按钮：显示模态对话框
$(".modal,.shadow").removeClass('hide');
}
function cancelModal() { //取消按钮：取消模态对话框
$(".modal,.shadow").addClass('hide');
$('.modal input[type="text"]').val(""); //取消模态对话框时重置value值
}
$('.edit').click(function(){ //编辑按钮：显示模态对话框并读取当前数据到Input
$(".modal,.shadow").removeClass('hide');
// this
// 思路：
// 循环获取tds中内容
// 获取 <td>内容</td> 获取中间的内容
// 赋值给input标签中的value
/*方法一：
var port = $(tds[0]).text();
var host = $(tds[1]).text();
$('.modal input[name="hostname"]').val(host);
$('.modal input[name="port"]').val(port);
*/
//方法二：
var tds = $(this).parent().prevAll();
tds.each(function () {
// 获取td的target属性值
var n = $(this).attr('target');
// 获取td中的内容
var text = $(this).text();
var temp = '.modal input[name="' + n + '"]';
$(temp).val(text); //字符串拼接中用$方法查找变量n对应input赋值
});
});
</script>
</body>
</html>
jQuery练习 | 模态对话框（添加删除）的更多相关文章
- 为Bootstrap模态对话框添加拖拽移动功能
请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> < ...
- jquery综合练习--模态对话框传值,删除,新增表格行
效果示例: 个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- jquery 模态对话框传值,删除,新增表格行
个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 简单的jquery表单验证+添加+删除+全选/反选
//布局 <body> <h4><a href="#">首页</a>><a href="#"> ...
- HTML bootstrap 模态对话框添加用户
HTML 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> ...
- jquery 学习(四) - 标签 添加/删除/修改
HTML代码 <div class="a1"> <div> <span id="a2">aaa</span> & ...
- python Django html 一对多数据实例 模态对话框添加数据
- jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
- jQuery添加删除元素
$(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...
随机推荐
- Integer中getInteger（），valueof（）
Integer类有两个看起来很类似的静态方法,一个是Integer.getInteger(String),另外一个是Integer.valueOf(String).如果只看方法名称的话,很容易将这两个 ...
- 8) Struts2 2 SpringMVC
git@github.com:witaste/smse.git 数据库脚本: /* Navicat MySQL Data Transfer Source Server : 新服务器 Source Se ...
- Hadoop（HDFS、YARN、HBase、Hive和Spark等）默认端口表
端口 作用 9000 fs.defaultFS,如:hdfs://172.25.40.171:9000 9001 dfs.namenode.rpc-address,DataNode会连接这个端口 50 ...
- ACM 媛在努力 华山论剑
媛在努力 描述在多媒体数据处理中,数据压缩算法尤为重要.小媛上完课后就想自己发明一个数据压缩算法.她想呀想,终于想到一个方法.在多媒体数据中有很多数据都是重复的,所以她想把连续相同的数据用数据出现的次 ...
- jmeter阶梯式加压测试
转自:https://www.cnblogs.com/imyalost/p/7658816.html#4226560 性能测试中,有时需要模拟一种实际生产中经常出现的情况,即:从某个值开始不断增加压力 ...
- hbase项目
四.HBase 项目4.1.涉及概念梳理:命名空间4.1.1.命名空间的结构 1) Table:表,所有的表都是命名空间的成员,即表必属于某个命名空间,如果没有指定, 则在 default 默认的命名 ...
- UML的常用关系及其符号表示
原创 UML的常用关系及其符号表示 一.实现关系 通常是一个类实现一个接口 符号表示: 二.泛化关系 通常是一个类继承另外一个类 符号表示: 三.依赖关系 通常是一个类里面的方法的参数类型是另一个类 ...
- 【Cocos2d-x】Cocos2d-x跨Android平台搭建之四：Win7 64位+ eclipse + cocos2dX
开始研究cocos2dx,mark一下这个的配置步骤 1 下载eclipse 2 下载android sdk,配置sdk路径,添加环境变量 3 安装adt 4 下载android ndk,配 ...
- vs2008编译opencv，不能copy CMakeVSMacros2.vsmacros
由于学习opencv,要查看源码文件,所以要先对opencv进行编译,可悲的是出错了 “不能copy CMakeVSMacros2.vsmacros” 通过上网查找资料,之所以出现这种情况,是因为 ...
- 20145233《网络对抗》Exp6 信息收集和漏洞扫描
20145233<网络对抗>Exp6 信息收集和漏洞扫描 实验问题思考 哪些组织负责DNS,IP的管理 全球根服务器均由美国政府授权的ICANN统一管理,负责DNS和IP地址管理.全球一共 ...