<!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. VSCODE 插件初探

    写在前面 分享一个vscode插件background(用于改变背景).点击直接跳到vscode插件开发步骤 做vscode的插件,很久就有这个想法了,但是一直因为这样,那样的事情耽误,放弃了N次.不 ...

  2. Tomcat catalina.out日志使用log4j按天分割

    由于tomcat catalina.out日志不会自动分割, 一.日志分割所需包在附近中 1. 压缩包中有三个jar包: log4j-1.2.16.jar tomcat-juli-adapters.j ...

  3. Push：iOS基于APNS的消息推送

    1. Push的三个步骤,如下图所示: (1)Push服务应用程序把要发送的消息.目的iPhone的标识打包,发给APNS: (2)APNS在自身的已注册Push服务的iPhone列表中,查找有相应标 ...

  4. 《阿Q正传》读后感

    kindle大法好. 利用坐车的时间阅读完了鲁迅先生写的<阿Q正传>, 心中感慨良多, 记下等以后翻看这些摸不着的回忆吧. 我没看过实体书版, 电子书版的<阿Q正传>注解很详细 ...

  5. ExpandoObject动态类生成属性转json

    using System; using System.Collections; using System.Collections.Generic; using System.Collections.O ...

  6. Union和Union All到底有什么区别

    以前一直不知道Union和Union All到底有什么区别,今天来好好的研究一下,网上查到的结果是下面这个样子,可是还是不是很理解,下面将自己亲自验证: Union:对两个结果集进行并集操作,不包括重 ...

  7. python成长之路-----day1----笔记（1）

    1.python语言介绍 python的创始人:Guido Van Rossum 2.python是一门什么样的语言 编程语言主要从以下几个角度进行分类:编译型,静态型,动态性,强类型定义语言和弱类型 ...

  8. nginx 客户端不缓存header

    location ~* \.(html|htm)$ { add_header Cache-Control no-store; }

  9. 搜索引擎Solr系列（一）： Solr6.2.1环境搭建

     一:Solr简介 Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通 ...

  10. filter过滤器怎么写

    package com.wh.filter; import java.io.IOException;import javax.servlet.Filter;import javax.servlet.F ...