<!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. 【SIGGRAPH】【最终幻想XV】的战斗场景实时演示的要点解说

    [SIGGRAPH][最终幻想XV]的战斗场景实时演示的要点解说 原文:西川善司 http://www.4gamer.net/games/999/G999902/20160730004/        ...

  2. svn中第一次check out working copy项目下来出现 ld: library not found for -lcrypto clang: error: linker command failed with exit code 1 (use -v to see invocation)

    这个问题主要是.a文件的忽略删除,需要更改设置,并且把文件重新添加

  3. 贪吃蛇的java代码分析（一）

    自我审视 最近自己学习java已经有了一个多月的时间,从一开始对变量常量的概念一无所知,到现在能勉强写几个小程序玩玩,已经有了长足的进步.今天没有去学习,学校里要进行毕业答辩和拍毕业照了,于是请了几天 ...

  4. php 获取中文长度 截取中文字符串

    #获取中文长度mb_strlen($str,$encoding); #截取中文字符串 mb_substr(str,start,length,encoding);

  5. MAC emacs下安装php-mode

    在某一个个页面(抱歉不记得了), 比较了三个配置,php-mode, php-mode-improved, xnhtml. 作者在比较后推荐xnhtml,但在xnthml官网下载链接一直显示403,真 ...

  6. EntityFramework优缺点

    高层视图: 改变在现有系统使用EntityFramework的优势是什么? • All -in-1框架的类映射表,需要编写映射代码, 并且是很难维护的. • 可维护性,易于理解的代码,无需创造大的数据 ...

  7. JMeter学习-025-JMeter 命令行（非GUI）模式详解（三）-测试图形化 HTML 报表（dashboard）生成

    闲话少述,接 上文 继续... 6.生成测试报表 生成测试报表前,需要先生成性能测试结果 jtl 或 csv 文件,用于测试结果的生成. jmeter -n -t JMeter分布式测试示例.jmx ...

  8. tomcat底层原理实现

    1.首先完成一个server类,用来接收客户端的请求:代码都在一个while(true)循环中,模拟tomcat一直在启动,其中绑定一个端口,用来监听一个端口,然后创建一个输入流,获取请求的输入流,然 ...

  9. vim - line

    copy complete current line: yy replace a char (e.g. comma) to new line: %s/,/\r/g

  10. TIJ——Chapter Seven:Reusing Classes

    Reusing Classes 有两种常用方式实现类的重用,组件(在新类中创建存在类的对象)和继承. Composition syntax Every non-primitive object has ...