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

随机推荐

Unmanaged Exports使用方法
Unmanaged Exports,可以利用C#生成非托管的DLL文件. 从https://sites.google.com/site/robertgiesecke/下载UnmanagedExport ...
运行第一个PHP程序
由于PHP比较简单,所以闲来无事学习一下PHP的程序. 之前安装XAMPP出现各种错误,于是下载了PHPStudy,真的十分简单方便,感谢网站开发者. 可以在网站的软件下载中下载,附上首页链接:htt ...
TYPESDK手游聚合SDK客户端远程开关：渠道支付黑名单
渠道支付要做开关干嘛用呢?为什么要做这种东西呢? 这个教训来分享一下,我们的游戏上线公测了,59个渠道首发,其中包括了应用宝,UC,360等的大渠道,也包含有一些工会渠道和小渠道,上线后一切正常,但是 ...
CentOS6.7搭建LNMP环境
1:查看环境: [root@localhost ~]# cat /etc/redhat-release 2:关掉防火墙 #重启后生效开启 [root@localhost ~]# chkconfig i ...
python学习笔记- 多线程(1)
学习多线程首先先要理解线程和进程的关系. 进程计算机的程序是储存在磁盘中的可执行的二进制文件,执行时把这些二进制文件加载到内存中,操作系统调用并交给处理器执行对应操作,进程是程序的一次执行过程,这是 ...
ssh改https为ssh
第一:设置Git的user name和email: 第二:然后生成key 这里会生成两个文件 id_rsa 和 id_rsa.pub 第三:登录你的GITHUB账号看下图第四:测试下是否成功第五 ...
【JS基础】DOM操作
appendChild() //向节点添加最后一个子节点 createElement() //创建元素节点 createTextNode() //创建文本节点,字符串值
div仿textarea使高度自适应
今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...
IE7,6与Fireofx的CSS兼容性处理方法集结
CSS对浏览器的兼容性有时让人很头疼,尤其是对于IE6这个问题多多的浏览器版本,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码 ...
Using View and Data API with Meteor
By Daniel Du I have been studying Meteor these days, and find that Meteor is really a mind-blowing f ...

jQuery 模态对话框示例

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

随机推荐

热门专题