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的值