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#中继承和构造函数
一个类继承自另外一个类,他们的构造函数改怎么办? 首先必须先声明:构造函数是不能继承的 我们先看一段代码:第一段代码没有构造函数,第二段有一个,第三段有两个.从他们的MSIL可以看出,有几个构造函数就 ...
- [SIP01]SIP Header Fields里面各字段用途
INVITE sip:bob@biloxi.com SIP/2.0 Via: SIP/2.0/UDP pc33.atlanta.com;branch=z9hG4bK776asdhds Max-Forw ...
- 对路径“c:\windows\system32\inetsrv\syslog”的访问被拒绝。
win7 64 系统,在调试wcf的时候,出了这个错误,当时感觉iis的权限不够,iis搞了好长时间没解决.最后改了用到的应用程序池中的标识.标识改成 localSytem,之后问题解决. IIS-- ...
- ref和out params
ref和out都对函数参数采用引用传递形式——不管是值类型参数还是引用类型参数,并且定义函数和调用函数时都必须显示生命该参数为 ref/out形式.两者都可以使函数传回多个结果. ref 类似于 PH ...
- sql 统计常用的sql
统计常用的sql 统计常用的sql语句: 今天的所有数据:select * from 表名 where DateDiff(dd,datetime类型字段,getdate())=0 昨天的所有数据:s ...
- selenium alert JS弹窗问题处理
弹窗一般分为三种类型: 1.警告消息框(alert) 警告消息框提供了一个"确定"按钮让用户关闭该消息框,并且该消息框是模式对话框,也就是说用户必须先关闭该消息框然后才能继续进行操 ...
- offsetWidth和width的区别
1.offsetWidth属性可以返回对象的padding+border+width属性值之和,style.width返回值就是定义的width属性值. 2.offsetWidth属性仅是可读属性,而 ...
- C# Winform下一个热插拔的MIS/MRP/ERP框架15（窗体基类场景1）
最基础的窗体基类其实是通过应用场景反推的结构. 以下是场景一: 单表应用,普通的数据,比如单位/颜色/特殊字典等使用者少的,无需过多控制的可以使用一个数据表格来管理. 和Excel表格差不多,批量修改 ...
- 【loj#6503.】「雅礼集训 2018 Day4」Magic（生成函数+容斥）
题面 传送门 题解 复杂度比较迷啊-- 以下以\(n\)表示颜色总数,\(m\)表示总的卡牌数 严格\(k\)对比较难算,我们考虑容斥 首先有\(i\)对就代表整个序列被分成了\(m-i\)块互不相同 ...
- 如何使用MySQL Workbench创建数据库存储过程
方法/步骤 1 打开My SQL Workbench 2 右击要启动的my SQL数据库连接,然后选择[connection to database] 3 此时进入数据库实例管理界面,下方显示 ...