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 = "8";
var td3 = document.createElement('td');
td3.innerHTML = "80";
var td4 = document.createElement('td');
td4.innerHTML = "编辑";
var td5 = document.createElement('td');
td5.innerHTML = "删除"; $(tr).append(td1);
$(tr).append(td2);
$(tr).append(td3); $('#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("");
} $('.edit').click(function(){
$(".modal,.shadow").removeClass('hide');
// this
var tds = $(this).parent().prevAll();
console.log(tds)
tds.each(function () {
// 获取td的target属性值
var n = $(this).attr('target'); // 获取td中的内容
var text = $(this).text();
var a1 = '.modal input[name="';
var a2 = '"]';
var temp = a1 + n + a2; $(temp).val(text);
}); // var port = $(tds[0]).text();
// var host = $(tds[1]).text();
//
// $('.modal input[name="hostname"]').val(host);
// $('.modal input[name="port"]').val(port);
// 循环获取tds中内容
// 获取 <td>内容</td> 获取中间的内容
// 赋值给input标签中的value });
</script>
</body>
</html>
jQuery 模态对话框示例的更多相关文章
- 15款基于 jQuery模态对话框
在数字世界的竞争已大大增加.这就是为什么要确保网络设计的各个方面都是一流的,这是很重要的.从布局到一些非常小的东西,比如对话框,每一件都需要设计得很好.对话框通常被忽视,但它们可能对访问者有很大的影响 ...
- JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单
<!DOCTYPE html> <!--示例之模态对话框--> <html lang="en"> <head> <meta c ...
- jquery 模态对话框传值,删除,新增表格行
个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
- jQuery UI 对话框（Dialog） - 模态表单
<!doctype html><html lang="en"><head> <meta charset="utf-8" ...
- QT创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束的简单示例
QT创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束的简单示例 部分代码: // 创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束 QMenu *pDialog = mBar->ad ...
- jQuery练习 | 模态对话框（添加删除）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery cxDialog 对话框
cxDialog 是基于 jQuery 的对话框插件,支持自定义外观样式,同时兼容 Zepto,方便在移动端使用. 版本: jQuery v1.7+ | Zepto v1.0+ jQuery cxDi ...
- 为Bootstrap模态对话框添加拖拽移动功能
请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> < ...
随机推荐
- [Tool] Open Live Writer插件开发
一 前言 Windows Live Writer(简称 WLW)开源之后变成 Open Live Writer(简称 OLW),原先 WLW 的插件在 OLW 下都不能用了,原因很简单,WLW 插件开 ...
- spring mvc 和spring security配置 web.xml设置
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmln ...
- python之最强王者（4）——字符串
1.Python 中文编码 前面章节中我们已经学会了如何用 Python 输出 "Hello, World!",英文没有问题,但是如果你输出中文字符"你好,世界" ...
- [连载]《C#通讯（串口和网络）框架的设计与实现》- 11.调试器的设计
目 录 第十一章 调试器设计... 2 11.1 调试接口... 2 11.2 界面方式调试... 3 11.3 命令行方式调试.. ...
- css图片精灵
<ul> <li class="top"> <em>01</em> <p><a href="http:/ ...
- 使用tomcat manager 管理和部署项目
在部署tomcat项目的时候,除了把war文件直接拷贝到tomcat的webapp目录下,还有一种方法可以浏览器中管理和部署项目,那就是使用tomcat manager. 默认情况下,tomcat m ...
- 3.1 js基本概念
js中的语法大量借鉴于C以及其他类C语言(Java,Perl). js中一切(变量.函数名.操作符等等)都区分大小写.如"var a;"中的变量a跟"var A;&quo ...
- H5——表单验证新特性，注册模态框！
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- ES6之解构赋值
截止到ES6,共有6种声明变量的方法,分别是var .function以及新增的let.const.import和class: 我们通常的赋值方法是: var foo='foo'; function ...
- Myeclipse怎么连接MySQL数据库？
1.打开 >> Myeclipse 2.Window >> Open Perspective >> Myeclipse Database Explore ...