<!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. 【jmeter】接口稳定性测试

    1.创建进行测试的脚本 2.场景设置 线程组设置并发用户数30 在启动1s,30并发用户全部启动 循环设置为永远 采用调度器:有两种工作方式 1.设置启动和结束时间 2.设置持续时间,我设置的是60s ...

  2. JAVA修饰符

    修饰符用来定义类.方法或者变量,通常放在语句的最前端.我们通过下面的例子来说明: public class className { // ... } private boolean myFlag; s ...

  3. 使用postman发送数据并构建collections执行测试

    1.安装 下载地址:https://www.getpostman.com/.直接安装,成功后在chorme的应用程序中会多出一个Postman.如果无法在google store上直接安装,可以下载. ...

  4. gmc银联接口开发demo

    1.接口文档 1.1 无gmc界面接口 (dll/ocx) dll调用(posinf.dll)函数名为:int bankall (char * request,char *response),其中第一 ...

  5. 【leetcode】两数之和

    https://leetcode.com/problems/two-sum/ Example: Given nums = [2, 7, 11, 15], target = 9, Because num ...

  6. 移动端的传统click事件延迟和点透现象

    一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...

  7. ionic实现点击popup区域外部分来关闭popup

    var htmlEl = angular.element(document.querySelector('html')); htmlEl.on('click', function (event) { ...

  8. Asp.Net Razor中的Consistent Layout

    有意义的参考:http://www.asp.net/web-pages/tutorials/working-with-pages/3-creating-a-consistent-look Asp.ne ...

  9. DIY PIXHAWK APM等飞控用的PPM转接板

    需要的硬件 一块arduino pro mini(推荐这个,比较小,当然如果你没有USB转转口的烧写工具买个ardunio nano板也是不错的,直接用USB线连接电脑就可以,用nano板要注意.它的 ...

  10. Java绘图

    paintComponent(Graphics g)方法: 1.不调用super.paintComponent(g)的话,rePaint()的时候就会把你写的paintComponent中的内容绘制上 ...