Question

您好我有一个父页面和子页面

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

这是我的父页面代码，现在我想在点击按钮时显示对话框，其中应包含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>

请帮助

Answer 1

你不能使用

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

因为您没有通过调用child.html在新窗口中打开window.open()。您已将此子页面的内容直接加载到父页面中，并将其显示为对话框。因此，您可以直接在页面中访问元素。用

替换上面的行

var table = $('#dataTable');

此外，child.html包含在jQuery(document).ready()中的代码也无法运行，因为不会触发就绪事件。删除包装。

在叠加框中显示另一页面的内容

1 个答案: