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

随机推荐

C# 之 EXCEL导入导出
以下方式是本人总结的一些经验,肯定有很多种方法,在此先记下,留待以后补充... 希望朋友们一起来探讨相关想法,请在下方留言. A-1:EXCEL模板导出非常简单,将EXCEL模板上传到项目中后,将其 ...
在Azure上的VM镜像库中找到想要的镜像
Azure上的虚机镜像库中, 有很多的镜像,其中当然也包括了用户自定义上传的镜像. 在Powershell中如果想使用这些镜像的话, 则需要知道其名称下面这条命令,可以获得所有的镜像信息 $imag ...
ubuntu学习的简单笔记
l vi编辑器开发步骤 A)输入 vi Hello.java B) 输入 i 插入模式. C)输入冒号.[保存退出:wq][退出不保存:q!] l 列出当前目录的所有文件:ls 详细信息的列表:ls ...
WaitGroup is reused before previous Wait has returned
当你Add()之前,就Wait()了,就会发生这个错误.
GOF23设计模式之工厂模式
-实现了创建者和调用者的分离 -面向对象设计的基本原则: ·OCP(开闭原则,Open-Closed Principle):一个软件的实体应当对扩展开放,对修改关闭 ·DIP(依赖倒转原则,Depen ...
php静态缓存简单制作
制作缓存的目的是为了让我们的页面运行更加快速,减少读取数据库内容的次数,给用户更好的体验,为此我们可以使自己的程序做一下缓存,并且设置一个缓存过期的时间,来保证与数据库的一致,当然并不是所有的程序都适 ...
利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。
实现背景色透明效果的代码实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...
iOS：frame访问、设置简化
看到一些程序都有这种写法,也不知道原创者是谁了.先在博客保存下. 在.m文件 #import "UIView+MyFrameCategory.h" @implementation ...
iOS报错[__NSCFNumber length]: unrecognized
出现这种报错很大的原因是因为类型给错了,或许你这个数据是从json上解析后得到的,但是需要看一下这个数据是NSString还是NSNumber类型,如果是NSNumber类型的话,你又直接使用NSSt ...
iOS开发系列--无限循环的图片浏览器
--UIKit之UIScrollView 概述 UIKit框架中有大量的控件供开发者使用,在iOS开发中不仅可以直接使用这些控件还可以在这些控件的基础上进行扩展打造自己的控件.在这个系列中如果每个控件 ...

jQuery 模态对话框示例

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

随机推荐

热门专题