日期:2014-05-16  浏览次数:20369 次

表格新增行的奇怪问题
现有两个文件:
a.htm
=================================================
<html>
<head>
<title> File   A </title>
</head>

<body>
<input   type= "button "   value= "Add   Row "   onclick= "createRow() "   />
<table   id= "tab1 ">
        <tr> <td> <select   onchange= "alert( 'a ') "> <option> a </option> <option> b </option> </select> </td> </tr>
</table>
<iframe   id= "genRow "   style= "display:none "   src= " "> </iframe>
<script   language= "javascript ">
function   createRow()
{
        document.getElementById( "genRow ").src= 'b.htm ';
}
function   addRow(trObj)
{
        var   t   =   document.getElementById( "tab1 ").getElementsByTagName( "tbody ")[0];
        //t.appendChild(trObj);
        t.insertAdjacentElement( "beforeEnd ",trObj);
}
</script>
</body>
</html>

b.htm
======================================================
<html>
<head>
<title> File   B </title>
</head>

<body>
<table   id= "tab2 ">
<tr> <td> <select   onchange= "alert( 'a ') "> <option> a </option> <option> b </option> </select> </td> </tr>
</table>

<script>
parent.addRow(document.getElementById( "tab2 ").getElementsByTagName( "tbody ")[0].children[0]);
</script>
</body>
</html>

=============================================================
问题描述:
当点击a.htm中 "Add   Row "按钮一次的时候新增行的select   onchange事件可用,   但当连续点两次以上时只有最后增加行的select   onchange事件可用,   为什么会这样??

------解决方案--------------------
你可以这样
b.htm
==========
<script>
parent.addRow(document.getElementById( "tab2 ").getElementsByTagName( "tbody ")[0].children[0].children[0].innerHTML);
</script>

a.htm
=========
<script language= "javascript ">
function createRow()
{
document.getElementById( "genRow ").src= 'b.htm ';
}
function addRow(trObj)
{
var t = document.getElementById( "tab1 ").getElementsByTagName( "tbody ")[0].children[0].children[0];
//t.appendChild(trObj);
t.insertAdjacentHTML( "beforeEnd ", " <br> "+trObj);
}
</script>
------解决方案--------------------
这样试试:

<html>
<head>
<title> File A </title>
</head>

<body>
<input type= "button " value= "Add Row " onclick= "addRow() " />
<table id= "tab1 ">
<tr> <td> <select onchange= "alert( 'a ') "> <option> a </option> <option> b </option> </select> </td> </tr>
</table>
<iframe id= &qu