python :模态对话框

<!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>
posted @ 2016-12-08 21:24 梅子472 阅读(969) 评论(0) 收藏举报
fight的博客

python :模态对话框

公告
