<!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. ODP方式，大批量数据写入ORACLE数据库

    项目中在同步数据的时候,需要把获得的数据DataTable,写入oracle数据库 因为System.Data.OracleClient写入方式写入大批量数据特别慢,改用Oracle.DataAcce ...

  2. 《linux内核设计与实现》读书笔记第十七章

    第17章 设备与模块 四种内核成分 设备类型:在所有 Unix 系统中为了统一普通设备的操作所采用的分类． 模块: Linux 内核中用于按需加载和卸载目标码的机制． 内核对象:内核数据结构中支持面向 ...

  3. idea 光标变成粗体且当前文件搜索功能无法使用的问题

    今天安装了idea最新版,安装完成后发现光标变成了粗体,并且快捷键在使用时出现了问题,比如:ctrl+F搜索功能无法使用 经过反复修改配置也无法改善情况,后来一次重启看到下面小窗弹出有关vim的一个提 ...

  4. vs2015企业版和专业版秘钥

    专业版:HMGNV-WCYXV-X7G9W-YCX63-B98R2企业版:HM6NR-QXX7C-DFW2Y-8B82K-WTYJV 来自http://www.cnblogs.com/xuhongfe ...

  5. css选择器及css优先级

    三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...

  6. 【OpenWRT】【RT5350】【一】OpenWrt开发环境搭建

    [宿主机构建] 本人电脑配置如下: CPU: intel 酷睿 i3 3.3G 双核 内存: 金士顿 8G 硬盘:希捷 1TB 7200rpm 操作系统:win7  旗舰版 64位 OpenWrt是在 ...

  7. Java 使用GDAL 读写 shapefile

    读取shp文件,并把它转化为json import org.gdal.ogr.*; import org.gdal.ogr.Driver; import org.gdal.gdal.*; public ...

  8. C# 与数据库中字段类型 Int16(short), Int32(int), Int64(long)的取值范围、区别 。string长度

    一开始看到Int16, Int32, Int64这三种类型就觉得有点怪, 为什么要整个数字结尾的, 挺怪的. 昨天互相想到, ms这么干就是想让大家一眼就知道这个数据类型占多大空间吧. Int8, 等 ...

  9. 使用nginx-http-concat添加nginx资源请求合并功能

    web项目中有时候一个页面会加载多个js或css资源请求,导致页面加载耗时较长,这时优化的方向可以采用资源合并,可以在客户端事先合并,也可以在服务端进行资源合并,服务端合并的方式使用起来更灵活. ng ...

  10. l创建Excel文件

    最近的项目中遇到需要将List<Map<String,String>>存储到Excel文件中,为满足此需求设计实现了如下函数: /** * 将MapList转化为Excel文件 ...