showModalDialog的子窗体内不能调用父窗体的 appendChild？

有两个页面，a.html 和 b.html
在 a.html 中有一个 table，我希望在a.html 中通过 showModalDialog 打开 b.html，然后在 b.html 中通过点击按钮来给 a.html 中的 table 添加行但是在 b.html 中调用父窗体对象中的 table.getElementsByTagName("TBODY")[0].appendChild() 函数时出错，好象是这个方法不能在子窗体中调用两个页面的代码如下：
a.html <html>
<head>
<title></title>
<script language="javascript">
function onTestClick(){
var argument = new Object();
argument.table = document.getElementById("tbItems");
argument.textbox = document.getElementById("txtCount");

window.showModalDialog("b.html", argument, "dialogWidth: 200px; dialogHeight:150px; resizable:no; scroll:auto; status:no");
}
</script>
</head>
<body>
<form name="form1" action="test.jsp">
<input type="button" value="test" onclick="onTestClick()">
<input type="text" value="1" readonly id="txtCount" />
<table id="tbItems" width="500" border="1" bordercolor="black" style="border-collapse: collapse">
<tr>
<td align="center">test</td>
<td align="center">test</td>
</tr>
</table>
</form>
</body>
</html>
b.html
<html>
<head>
<title>test</title>
<script language="javascript">
function onAddClick(){
var table = dialogArguments.table;
var txtCount = dialogArguments.textbox;

var numCount = new Number(txtCount.value);
txtCount.value = "" + (numCount.valueOf() + 1);


var tr = document.createElement("tr");

var td1 = document.createElement("td");
td1.setAttribute("align", "center");
td1.innerText = "aaa";

var td2 = document.createElement("td");
td2.setAttribute("align", "center");
td2.innerText = "bbb";

tr.appendChild(td1);
tr.appendChild(td2);

var tbody = table.getElementsByTagName("TBODY")[0];
tbody.appendChild(tr);


// txtCount.setAttribute("width", "120px");
}
</script>
</head>
<body>
<input type="text" name="txtName" id="txtName" />
<input type="text" name="txtAdd" id="txtAdd" />
<input type="button" name="btnAdd" id="btnAdd" value="add" onclick="onAddClick()" />
</body>
</html>

解决方案 »

  1.   

    试试
    tr = table.insertRow(-1);
    var td1 = tr.insertCell(-1);
    td1.setAttribute("align", "center");
    td1.innerHTML = "aaa";
      

  2.   

    对于子节点来说父节点的DOM 是只读属性.所以无法修改
      

  3.   

    关键的不是这个
    LZ这个问题有2种解决方案
    1：避免使用createElement方法
    用insertRow和insertCell达到目的
    2：document.createElement的时候，注意document对象的正确性，LZ用的是b.html的document,却想添加到a.html中，当然会错第一种解决方案最简单，我就不写代码了
    下面是第二种
    a.html
    <html>
    <head>
        <title></title>
        <script language="javascript">
        function onTestClick(){
            var argument = new Object();
            argument.table = document.getElementById("tbItems");
            argument.textbox = document.getElementById("txtCount");
            argument.document = document;//add by lihui_shine
            window.showModalDialog("b.html", argument, "dialogWidth: 200px; dialogHeight:150px; resizable:no; scroll:auto; status:no");
        }
        </script>
    </head>
    <body>
        <form name="form1" action="test.jsp">
            <input type="button" value="test" onclick="onTestClick()">
            <input type="text" value="1" readonly id="txtCount" />
            <table id="tbItems" width="500" border="1" bordercolor="black" style="border-collapse: collapse">
                <tr>
                    <td align="center">test</td>
                    <td align="center">test</td>
                </tr>
            </table>
        </form>
    </body>
    </html>b.html
    <html>
    <head>
        <title>test</title>
        <script language="javascript">
            function onAddClick(){
                var table = dialogArguments.table;
                var txtCount = dialogArguments.textbox;
                var pdocument = dialogArguments.document;//add by lihui_shine
                
                var numCount = new Number(txtCount.value);
                txtCount.value = "" + (numCount.valueOf() + 1);
                
                
                var tr = pdocument.createElement("tr");//modify by lihui_shine
                
                var td1 = pdocument.createElement("td");//modify by lihui_shine
                td1.setAttribute("align", "center");
                td1.innerText = "aaa";
                
                var td2 = pdocument.createElement("td");//modify by lihui_shine
                td2.setAttribute("align", "center");
                td2.innerText = "bbb";
                
                tr.appendChild(td1);
                tr.appendChild(td2);
                
                var tbody = table.getElementsByTagName("TBODY")[0];
                tbody.appendChild(tr);
                
                
                // txtCount.setAttribute("width", "120px");
            }
        </script>
    </head>
    <body>
        <input type="text" name="txtName" id="txtName" />
        <input type="text" name="txtAdd" id="txtAdd" />
        <input type="button" name="btnAdd" id="btnAdd" value="add" onclick="onAddClick()" />
    </body>
    </html>
      

  4.   

    a.html中 弹出模态窗口时 将 a.html的window对象 作为 第二个参数传递 如下
    window.showModalDialog("b.html", window, "");
    然后在 b.html中 window.dialogArguments 代表传过来的参数 也就是 a的window 对象
    操作window.dialogArguments就等于操作a的window
     可以试试，不过 我也觉得2楼说的有道理，子应该只能调用父的方法和属性
      

  5.   

    三楼的方法偶试过了，是可行的但是我以前在 b.html 中用 parent.document 为什么不行啊 
      

  6.   

    window.showModalDialog弹出的窗口，是不能用parent来获取父窗口的信息的
    如果父窗口需要传什么参数过来，用window.showModalDialog方法的第二个参数，也就是3L代码中的方法；返回参数使用returnValue
    使用parent是在子框架中，如iframe,frameSet框架
    window.open是使用opener