HTML #模态对话框 （完成版）

###

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: gray;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 1;
        }
        .c2{
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            height: 300px;
            width: 626px;
            margin-top: -150px;
            margin-left: -400px;
        }
        .c3{
            color: #000;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input id="i1" type="button" value="添加">
    <table border="1px">
        <thead>
            <tr>
                <th>主机名</th>
                <th>IP</th>
                <th>端口</th>
                <th>配置</th>
            </tr>
        </thead>
        <tbody>
            <div id="i2" class="c1 hide">12</div>
            <tr>
                <td>localhost</td>
                <td>1.1.1.1</td>
                <td>8080</td>
                <td><input class="c3" type="button" value="编辑"><input type="button" value="删除"></td>
            </tr>
            <tr>
                <td>localhost</td>
                <td>1.1.1.2</td>
                <td>3306</td>
                <td><input class="c3" type="button" value="编辑"><input type="button" value="删除"></td>
            </tr>
            <tr>
                <td>localhost</td>
                <td>1.1.1.3</td>
                <td>80</td>
                <td><input class="c3" type="button" value="编辑"><input type="button" value="删除"></td>
            </tr>
        </tbody>
        <div id="i3" class="c2 hide">
            <div id="i4">
                <input type="text" name="hostname" />
                <input type="text" name="ipaddr" />
                <input type="text" name="port"/>
            </div>
            <input type="button" value="取消">
            <input type="button" value="确定">
        </div>
    </table>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $('#i1').click(function () {
            $('#i2,#i3').removeClass('hide');

        });
        $("input[value='取消']").click(function () {
            $('#i2,#i3').addClass('hide');
            $(".c2 input[type='text']").val('');

            });
        $('.c3').click(function () {
            var h = $('#i2,#i3').removeClass('hide');
            tds = $(this).parent().siblings();
            var hostname = $(tds[0]).text();
            var ipaddr = $(tds[1]).text();
            var port = $(tds[2]).text();
//            console.log(hostname,ipaddr,port);
//            var v1 = $('#i4').children("input[name='hostname']").val(hostname);
//            var v2 = $('#i4').children("input[name='ipaddr']").val(ipaddr);
//            var v3 = $('#i4').children("input[name='port']").val(port);
            var v1 = $(".c2 input[name='hostname']").val(hostname)
            var v2 = $(".c2 input[name='ipaddr']").val(ipaddr);
            var v3 = $(".c2 input[name='port']").val(port);
        })
    </script>
</body>
</html>

 ps：大家可以复制过去测试下。

静态效果图：

12 ###

主机名IP端口配置
localhost 1.1.1.1 8080
localhost 1.1.1.2 3306
localhost 1.1.1.3 80
posted @ 2017-08-29 19:01  陈奕迅-可以了  阅读(499)  评论(0)  编辑  收藏  举报