<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <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="add();">添加</a>

<table border="1" id='ta'>

    <tr>

        <td id="tt" target="hostname">1.1.1.11</td>

        <td target="port">80</td>

        <td>

            <a class="edit">编辑</a> | <a class="del_model">删除</a>

        </td>

    </tr>

    <tr>

        <td target="hostname">1.1.1.12</td>

        <td target="port">80</td>

        <td>

            <a class="edit">编辑</a> | <a class="del_model">删除</a>

        </td>

    </tr>

    <tr>

        <td target="hostname">1.1.1.13</td>

        <td target="port">80</td>

        <td>

            <a class="edit">编辑</a> | <a class="del_model">删除</a>

        </td>

    </tr>

    <tr>

        <td target="hostname">1.1.1.14</td>

        <td target="port">80</td>

        <td>

            <a class="edit">编辑</a> | <a class="del_model">删除</a>

        </td>

    </tr>

</table>

<div class="modal hide">

    <div>

        <input name="hostname" type="text"/>

        <input name="port" type="text"/>

    </div>

    <div>

        <input type="button" value="取消" onclick="cancel();"/>

        <input id="confirm" type="button" value="确定" />

    </div>

</div>

<div class="shadow hide"></div>

<script src="jquery-1.12.4.js"></script>

<script>

    function add() {

        $(".modal,.shadow").removeClass('hide')

    }

    function cancel() {

        $(".modal,.shadow").addClass('hide')

        $('.modal input[type="text"]').val("")

//        点击取消按钮就会清空文本框的内容

    }

    $(".edit").click(function () {

        $('.modal,.shadow').removeClass('hide')

        var res = $(this).parent().prevAll()

//        循环每一个td

        res.each(function () {

//             获取hostname属性

            var host_name = $(this).attr('target');

//             获取内容1.1.1.11

            var res = $(this).text();

//             $('.modal input[name="hostname"]')

//             字符串拼接

            var a = '.modal input[name="';

            var b = '"]'

            var tmp = a + host_name + b

            $(tmp).val(res)

        })

//        .val()进行赋值

    })

    $('.del_model').click(function () {

        $(this).parent().parent().remove();

    })

    function confirm_model() {

        var tr = document.createElement('tr');

        var td1 = document.createElement('td');

        td1.innerHTML='1.1.1.1';

        var td2 = document.createElement('td');

        td2.innerHTML='8001';

        $(tr).append(td1);

        $(tr).append(td2);

        $('#ta').append(tr);

        $(".modal,.shadow").addClass('hide');

    }

</script>

</body>

</html>

python :模态对话框的更多相关文章

  1. MFC编程 | 非模态对话框的定义

    因为课程需要,会用到MFC编程,所以讲一些经验总结下,以便日后使用查询. // 非模态对话框的定义 // 通过单文档菜单调用一个非模态窗口 1.首先在工程里插入一个对话框(如:IDD_DLG_TEST ...

  2. bootstrap dialog 使用模态对话框

    bootstrap3-dialog 使用模态对话框 <div class="modal fade"> <div class="modal-dialog& ...

  3. 【原创】WinForm 模态对话框

    今天解决的一个问题,记录下,以备后用. 问题描述:WinForm程序有超时自动退出功能,但是有些模态对话框不关掉的话会退出失败,原因(猜测): 程序倒计时用的System.Windows.Forms. ...

  4. 关于easyUI的模态对话框

    本文版权归博客园和作者吴双本人共同所有,转载和爬虫请注明原文地址.博客园蜗牛cnblogs.com/tdws 会用easyUI的模态对话框会是我们的开发更加简洁,只需下载这个插件,把需要的文件拖到项目 ...

  5. 自定义AlertView实现模态对话框

    在Windows应用程序中,经常使用模态(Model)对话框来和用户进行简单的交互,比如登录框.在IOS应用程序中,有时我们也希望做同样的事情.但IOS的UI库中,没有模态对话框,最接近那个样子的应该 ...

  6. MFC编程入门之十二（对话框：非模态对话框的创建及显示）

    上一节讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 非模态对话框显示后,程序其他窗口仍然能正常运行,可以响应用户输入,还可以相互切换.上一讲中创建的Tip模态对话框 ...

  7. MFC编程入门之十一（对话框：模态对话框及其弹出过程）

    加法计算器对话框程序大家照着做一遍后,相信对基于对话框的程序有了些解了,有个好的开始对于以后的学习大有裨益.趁热打铁,这一节讲讲什么是对话框和非模态对话框,以及模态对话框怎样弹出. 一.模态对话框和非 ...

  8. MFC学习笔记（一）向模态对话框传递数据

    声明构造函数为2个参数,具有默认参数的参数须放在后面. CDialogDimmer::CDialogDimmer(CString name,CWnd* pParent /*=NULL*/) : CDi ...

  9. Unity3D 调用模态对话框/Unity3D MessageBox

    Unity模态对话框/Unity MessageBox 很多时候,我们需要将Unity的exe产品发布到某一个平台.比如某某斗地主发布到某Q游戏.这时候如果需要调试肿么办.办法无外乎那几个.1:源码调 ...

随机推荐

  1. robot创建桌面图标（转载）

    桌面ride图标,安装之后会自动创建(偶尔也会创建失败),创建桌面图标方法如下: 1. 新建快捷方式 在桌面右击鼠标,弹出的菜单选择 新建-快捷方式 ,然后在"请键入对象"的位置输 ...

  2. linq 小记

    1.简单的linq语法 //1 var ss = from r in db.Am_recProScheme select r; //2 var ss1 = db.Am_recProScheme; // ...

  3. CDN服务技术架构图

    前言 在博文中 解读大型网站的演变过程  浅谈 举家搬迁静态文件到CDN 博文中都有涉及CDN,这次我们来详细讲解下CDN的架构 简介 CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器 ...

  4. FireDAC 连接SQL Server一些要注意的地方

    TFDConnection: FetchOptions.Mode 设置为fmAll, 返回全部结果, 否则默认只返回前50条, 效果与open以后再执行FetchAll一样 Specifies how ...

  5. 使用css使textbox输入内容自动变大写

    <style type="text/css"> input[type="text"] { text-transform:uppercase; } & ...

  6. cookie、session与token

    一.详述概念 1.Cookie机制 cookie机制是采用在客户端保持状态的方案(cookie的作用就是为了解决HTTP协议无状态的缺陷所作的努力).cookie的使用是由浏览器按照一定的原则在后台自 ...

  7. 关于UIView的方法animateWithDuration:animations:completion:的说明

    今天遇到一个问题,具体问题就不细说了,总之是UIView的动画导致的. 研究结果表明,UIViewController被挡住或没显示出来时,用UIView的静态方法animateWithDuratio ...

  8. Magento的基本架构解析

    Magento的基本架构解析 magento 是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为 zend框架提供了面向对象的代码库并且有很 ...

  9. 修复Magento SQLSTATE[23000]: Integrity constraint

    magneto在意外情况下报错Magento SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry,出现这个问题最 ...

  10. 只有在配置文件或 Page 指令中将 enableSessionState 设置为 true 时，才能使用会话状态。还请确保在应用程序配置的 // 节中包括 System.Web.SessionSta

    我直接在父类的构造方法中调用了sessionj结果就报这个错误 搜了好久 让改web.config 可是不起作用 代码如下: public class BasePage:System.Web.UI.P ...