<!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 模态对话框示例的更多相关文章

  1. 15款基于 jQuery模态对话框

    在数字世界的竞争已大大增加.这就是为什么要确保网络设计的各个方面都是一流的,这是很重要的.从布局到一些非常小的东西,比如对话框,每一件都需要设计得很好.对话框通常被忽视,但它们可能对访问者有很大的影响 ...

  2. JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单

    <!DOCTYPE html> <!--示例之模态对话框--> <html lang="en"> <head> <meta c ...

  3. jquery 模态对话框传值,删除,新增表格行

    个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...

  5. jQuery UI 对话框（Dialog） - 模态表单

    <!doctype html><html lang="en"><head> <meta charset="utf-8" ...

  6. QT创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束的简单示例

    QT创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束的简单示例 部分代码: // 创建模态对话框阻塞整个应用程序和非模态对话框唯一性约束 QMenu *pDialog = mBar->ad ...

  7. jQuery练习 | 模态对话框（添加删除）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jQuery cxDialog 对话框

    cxDialog 是基于 jQuery 的对话框插件,支持自定义外观样式,同时兼容 Zepto,方便在移动端使用. 版本: jQuery v1.7+ | Zepto v1.0+ jQuery cxDi ...

  9. 为Bootstrap模态对话框添加拖拽移动功能

    请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> < ...

随机推荐

  1. Navisworks Addin 插件集成

    调用Navisworks的 Api . 我这里是基于.NET 开发的. 我主要是尝试着获取一下工程量的API.不过还在研究. 插件的启动入口. //插件描述 [PluginAttribute(&quo ...

  2. js正则表达式校验非负浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. python学习笔记- 多线程(1)

    学习多线程首先先要理解线程和进程的关系. 进程 计算机的程序是储存在磁盘中的可执行的二进制文件,执行时把这些二进制文件加载到内存中,操作系统调用并交给处理器执行对应操作,进程是程序的一次执行过程,这是 ...

  4. windows go安装

    1.安装git 因为golang是通过git来管理远程包的,所以我们首先要安装git,下载地址:http://www.git-scm.com/download/. git安装比较简单,直接下一步即可( ...

  5. css单行文本与多行溢出文本的省略号问题

    在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...

  6. Webmin 安装 (centos7 rpm 方式)

    网上有很多此类的教程,大多都很老了.这里记录下自己安装Webmin的过程. # 系统准备 > yum -y install perl perl-Net-SSLeay openssl perl-I ...

  7. Atitit 在线支付系统功能设计原理与解决方案 与目录

    Atitit 在线支付系统功能设计原理与解决方案 与目录 1.1. 支付系统1 1.2. 独立的支付子体系..微服务架构..1 1.3. 参考书籍1 支付战争 [The PayPal Wars:Bat ...

  8. Android 弱引用和软引用

    软引用 和 弱引用 1.  SoftReference<T>:软引用-->当虚拟机内存不足时,将会回收它指向的对象:需要获取对象时,可以调用get方法. 2.  WeakRefere ...

  9. Android--Volley框架的使用

    一.Volley特点 通信更快,更简单(数据量不大,但网络通信频繁) Get.Post网络请求及网络图像的高效率异步处理 排序(可以通过网络请求的优先级进行处理) 网络请求的缓存 多级别取消请求 和A ...

  10. android 帧动画

    首先在res/drawable/name1.xml/定义一组图片集合: <?xml version="1.0" encoding="utf-8"?> ...