Jquery 在覆盖框中显示另一页的内容

嗨，我有一个父页面和子页面

<script type="text/javascript">
$(document).ready(function(){
       var dialogOpts = {
        modal: true,
        bgiframe: true,
        autoOpen: false,
        height: 500,
        width: 500,
        draggable: true,
        resizeable: true,
        open: function() {
        //display correct dialog content
        $("#dataTable").load("child.html");}
        };
    $("#dataTable").dialog(dialogOpts); //end dialog

    $('#addRow').click(
        function (){
            $("#dataTable").dialog("open");
            return false;
        }
    );

});




       function RemoveRow(c) {
        $(c).parent().remove();
       }


jQuery(document).ready(function () {
$("#dataTable").bind("mouseover",function () {

  $("#dataTable").tableDnD();
});
});

    </script>

    <INPUT type="button" id="addRow" value="Add Row"  />



    <TABLE id="dataTable" width="350px" border="1">

    </TABLE>

$（文档）.ready（函数（）{
变量dialogOpts={
莫代尔：是的，
bgiframe：是的，
自动打开：错误，
身高：500，
宽度：500，
真的，
可调整大小：正确，
打开：函数（）{
//显示正确的对话框内容
$（“#dataTable”）.load（“child.html”）；}
};
$（“#数据表”）.dialog（dialogOpts）；//结束对话框
$（“#添加行”）。单击(
函数（）{
$（“#数据表”）。对话框（“打开”）；
返回false；
}
);
});
函数（c）{
$（c）.parent（）.remove（）；
}
jQuery（文档）.ready（函数（）{
$（“#dataTable”）.bind（“mouseover”，函数（）{
$（“#数据表”）.tableDnD（）；
});
});

这是我的父页面代码，现在我想在单击按钮时显示对话框，其中应该包含child.html页面的值

Child.html页面代码

 <script type="text/javascript">

     function AddElement(id,name) {

            var table = window.opener.document.getElementById("dataTable");

              $(table).append('<tr id="'+id+'"><td  onclick="RemoveRow(this);">Remove</td><td>'+id+'</td><td>'+name+'</td></tr>');  
             //$(table).tableDnD();

            //self.close();
        }


jQuery(document).ready(function () {

  $("#table-1").tableDnD();
});


    </script>


    <table width="200" border='1' id="table-1">

    <tr id="1">
        <td><a href="#" onCLick='AddElement("1","Colur Plus")'>1</a></td>
        <td>Colur Plus</td>
    </tr>

    <tr id="2">
        <td><a href="#" onCLick='AddElement("2","Levis")'>2</a></td>
        <td>Levis</td>
    </tr>

    <tr id="3">
        <td><a href="#" onCLick='AddElement("3","Lee")'>3</a></td>
        <td>Lee</td>
    </tr>

    <tr id="4">
        <td><a href="#" onCLick='AddElement("4","Pepe Jeans")'>4</a></td>
        <td>Pepe Jeans</td>
    </tr>

    <tr id="5">
        <td><a href="#" onCLick='AddElement("5","US Polo")'>5</a></td>
        <td>US Polo</td>
    </tr>

    <tr id="6">
        <td><a href="#" onCLick='AddElement("6","Park Avenue")'>6</a></td>
        <td>Park Avenue</td>
    </tr>

    <tr id="7">
        <td><a href="#" onCLick='AddElement("7","Wrangler")'>7</a></td>
        <td>Wrangler</td>
    </tr>

    <tr id="8">
        <td><a href="#" onCLick='AddElement("8","Arrow")'>8</a></td>
        <td>Arrow</td>
    </tr>

    </table>

函数附加元素（id、名称）{
var table=window.opener.document.getElementById（“数据表”）；
$（表）.append（'Remove'+id+''+name+''）；
//$（表）.tableDnD（）；
//self.close（）；
}
jQuery（文档）.ready（函数（）{
$（“#表1”）.tableDnD（）；
});
科鲁加
利维斯
李
佩佩牛仔裤
美国马球
公园大道
牧马人
箭

请帮助

您不能使用

var table = window.opener.document.getElementById("dataTable");

因为您没有在调用

window.open（）

的新窗口中打开

child.html

。您已将此子页面的内容直接加载到父页面，并将其显示为对话框。因此，您可以直接访问页面中的元素。将上面的行替换为

var table = $('#dataTable');

---

另外，封装在

jQuery（document）.ready（）中的
child.html
中的代码将不会运行，因为不会触发ready事件。卸下包装。
欢迎使用SO。使用
{}
按钮格式化代码或按
CTRL+K
（或缩进四个空格）。