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"> < ...

随机推荐

一个java文件中可包含多个main方法
java中的main方法是java应用程序的入口,java程序在运行时,首先调用执行main方法.但并不是说java中只能有一个main方法,不同类中都可以包含main方法.当JVM进行编译时,会提示 ...
Effective java笔记（一），创建与销毁对象
1.考虑用静态工厂方法代替构造器类的一个实例,通常使用类的公有的构造方法获取.也可以为类提供一个公有的静态工厂方法(不是设计模式中的工厂模式)来返回类的一个实例.例如: //将boolean类型转换 ...
[连载]《C#通讯（串口和网络）框架的设计与实现》- 6.通讯控制器的设计
目录第六章通讯控制器的设计... 2 6.1 控制器接口... 2 6.2 串口控制器... 3 6.3 ...
关于mysql字段时间类型timestamp默认值为当前时间问题
今天把应用部署到AWS上发现后台修改内容提交后程序报错,经过排查发现是更新数据的时候,有张数据表中的一个timestamp类型的字段默认值变成了"0000-00-00 00:00:00.00 ...
Eclipse安装Spring-tool-suite
目录结构: // contents structure [-] 在Eclipse上安装Spring-tool-suite的方法有那些如何查看自己的Eclipse版本如何知道自己的Eclipse对应 ...
Spring in Action 学习笔记一
Spring 核心 Spring的主要特性仅仅是依赖注入DI和面向切面编程AOP JavaBean 1996.12 Javav 规范针对Java定义了软件组件模型,是简单的J ...
windows 7 + virtualbox安装centos+mono+jexus
1. 下载安装virtualbox和virtualbox extension 2. 创建并安装centos虚拟机 3. 下载并安装libgdiplus,gdi+库 4. 下载并安装Mono 5. 下载 ...
Android 手机卫士--9patch图
本文主要介绍9patch图 *.9.png:android手机上,可以按需求自动拉伸的图片本文地址:http://www.cnblogs.com/wuyudong/p/5947195.html,转载 ...
【容器云】十分钟快速构建 Influxdb+cadvisor+grafana 监控
本文作者:七牛云布道师@陈爱珍,DBAPlus社群联合发起人.前新炬技术专家.多年企业级系统的应用运维及分布式系统实战经验.现专注于容器.微服务及DevOps落地的研究与实践. 安装过程三个都直接下 ...
Appfuse：添加自定义页面组件
我之前是做ASP.NET的,碰到被多个页面都使用的类似组件后,就想着采用ascx(用户自定义组件)来解决,那做Java我也想用这种方案. 我要做的效果如下: 实现方案:tag方式(自定义标签) 1. ...

jQuery 模态对话框示例

jQuery 模态对话框示例的更多相关文章

随机推荐

热门专题