python :模态对话框

时间：2016-12-09 00:13:21 阅读：243 评论：0 收藏：0 [点我收藏+]

标签：edit doctype rip bsp doc black model 循环 eval

<!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 :模态对话框

标签：edit doctype rip bsp doc black model 循环 eval

原文地址：http://www.cnblogs.com/xuehuahongmei/p/6146701.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行