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 ...
随机推荐
- 编写高质量代码改善C#程序的157个建议——建议119：不要使用自己的加密算法
建议119:不要使用自己的加密算法 很多人认为自己写的加密算法才是安全的,因为该算法只有“自己知道”.很遗憾,这是大错特错. 首先,我们不是秘密学专家,如果我们随随便便写个算法就称得上是加密算法的话, ...
- 已经导入到VS工具箱中的DevExpress如何使用
1.下载安装DevExpress控件(如DXperienceUniversal-11.1.12.exe),安装后路径:“C:\Program Files (x86)\DevExpress 2011.1 ...
- Android-原生对话框
package liudeli.ui.all; import android.app.Activity; import android.app.AlertDialog; import android. ...
- Spring学习（二）——使用Gradle构建一个简单的Spring MVC Web应用程序
1.新建一个Gradle工程(Project) 在新建工程窗口的左侧中选择 [Gradle],右侧保持默认选择,点击next,模块命名为VelocityDemo. 2.在该工程下新建一个 module ...
- 按照已有的模板输出<一>(如发票)
按照已有的模板输出<一> 普通的发票基本上都是固定模式,所以我们一般写好固定的模板,把其中需要变动的地方,以特定符号来代替.每次打印发票的时候,只需将其中的特定符号转换成我们需要显示的数据 ...
- nej+regular环境使用es6的低成本方案
本文来自 网易云社区 . 希望在生产环境中使用es6/7,babel应该是最普遍的选择.这是babel官网中,它对自己的定义: Babel 自带了一组 ES2015 语法转化器.这些转化器能让你现在就 ...
- 《Beginning Java 7》 - 4 - finalize() 手动垃圾回收
当我们想在系统进行垃圾回收时做一些特定的工作,我们就可以重写 finalze() 函数,因为 Object 的 此函数是空的. 比如: protected void finalize() throws ...
- [ZJOI2008] 树的统计Count
题目链接:戳我 树链剖分. 注意一点就是维护最大值的时候最好写成下面代码里那个样子,要不然会因为可能左右区间没有的问题有奇奇怪怪的锅. 代码如下: #include<iostream> # ...
- RDLC报表的相关技巧二（主从报表）
为了广泛支持客户端,系统框架运行在.Net Framework 4.0之上,Report viewer的版本也限制在11.0.3366.16. 使用NUGET安装Microsoft.ReportVie ...
- 8，Phaser__并发且多阶段任务
使用场景 考选武状元 10 个 武生 参加考试 ,第一个关 靠耐力, 坚持最久的5个人进入第二关, 第二关考 力气,力气最大的 3个人进入第二关,第三关考兵法,兵法最好的当选武状元