表格新增行的奇怪问题
现有两个文件:
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