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 ...
随机推荐
- Linq学习<五> 运用linq查询Xml
这节将学习如何用 linq查询xml 一.我们先看看在xml中我们怎么操作 public void xmlWayToQueryXmlFile() { XmlDocument xmldoc = new ...
- 设计模式16：Mediator 中介者模式（行为型模式）
Mediator 中介者模式(行为型模式) 依赖关系的转化 动机(Motivation) 在软件构建过程中,经常出现多个对象互相关联交互的情况,对象之间经常会维持一种复杂的应用关系,如果遇到一些需求的 ...
- 编写高质量代码改善C#程序的157个建议——建议89：在并行方法体中谨慎使用锁
建议89:在并行方法体中谨慎使用锁 除了建议88所提到的场合,要谨慎使用并行的情况还包括:某些本身就需要同步运行的场合,或者需要较长时间锁定共享资源的场合. 在对整型数据进行同步操作时,可以使用静态类 ...
- 团体程序设计天梯赛L2-009 抢红包 2017-03-22 19:18 131人阅读 评论(0) 收藏
L2-009. 抢红包 时间限制 300 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 没有人没抢过红包吧-- 这里给出N个人之间互相发红包.抢 ...
- Ubuntu下使用UFW，以及CentOS7的默认防火墙firewalld
UFW是一个简化版的iptables,基于iptables,配置比iptables简单 默认UFW是关闭状态,即Ubuntu默认打开所有端口,比较危险. 检测状态 ufw status 设置默认状态, ...
- c#设计模式系列：状态模式（State pattern）
引言 我们在编程的时候,有时候会遇到,一个对象的行为动作会由对象的状态来决定的,也就是对象的行为是由状态来决定,如果对象的状态很多,那么也会由很多不同的行为,这时候我们一班会 if –else if- ...
- MySQL数据库（四）
操作数据库表的内容: -- 向表中插入数据:insert into table_name values(now(),'a'); insert into student (id,name,sex) va ...
- orcal 锁表
--查询Oracle正在执行的sql语句及执行该语句的用户 SELECT b.sid oracleID, b.username 登录Oracle用户名, b.serial#, spid 操作系统ID, ...
- 40. 组合总和 II leetcode JAVA
题目: 给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字在每个组合中只能使 ...
- php 中将完整的年月日时分秒的时间转换成 年月日的形式
strtotime() 函数将任何英文文本的日期或时间描述解析为 Unix 时间戳(自 January 1 1970 00:00:00 GMT 起的秒数), 将完整的时间格式转换成时间撮的形式,再去进 ...