jQuery模态对话框示例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .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;
        }
        .hide{
            display: none;
        }
    </style>

</head>
<body>
    <a onclick="AddElement();">添加</a>
    <table border="1">
        <tr>
            <td>192.168.1.1</td>
            <td>80</td>
            <td><a class="edit">编辑</a> |<a>删除</a></td>
        </tr>
        <tr>
            <td>192.168.1.2</td>
            <td>80</td>
            <td><a class="edit">编辑</a> |<a>删除</a></td>
        </tr>
       <tr>
            <td>192.168.1.3</td>
            <td>80</td>
            <td><a class="edit">编辑</a> |<a>删除</a></td>
        </tr>
        <tr>
            <td>192.168.1.4</td>
            <td>80</td>
            <td><a class="edit">编辑</a> |<a>删除</a></td>
        </tr>
    </table>
    <div class="modal hide">
        <div>
            <input name="hostname" type="text"/>
            <input name="port" type="text"/>
            <!--<input name="" type="text"/>-->


        </div>
        <div>
        <input type="button" value="取消" onclick="cancelModdal()">
    </div>
    </div>

    <div class="shadow hide"></div>
    <script src="jquery.js"></script>
    <script>
        function AddElement() {
            $('.modal,.shadow').removeClass('hide')

        }
        function cancelModdal() {
            $('.modal,.shadow').addClass('hide')
            $('.modal input[type="text"]').val("")

        }
        $('.edit').click(function () {
            $('.modal,.shadow').removeClass('hide')
            var tds =$(this).parent().prevAll();
            // 循环获取tds内容
            // 赋值给input的value.获取tr中的值
            var port = $(tds[0]).text();
            var host = $(tds[1]).text();

            $('.modal input[name="hostname"]').val(host)
            $('.modal input[name="port"]').val(port)
        })
    </script>
</body>
</html>

            文本操作;
                $(..).text() #获取文本内容
                $(..).text("<a>1</a>")#设置文本内容
                
                $(..).html() #获取标签
                $(..).html("<a>1</a>")#设置标签
                
                $('#i2').val()#获取value的值
                $('#i2').val('11')#设置value的值

posted @ 2021-02-07 17:55  安好_世界  阅读(127)  评论(0)  编辑  收藏  举报