表格新增行的奇怪问题
现有两个文件:
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= "genRow " style= "display:none " src= " "> </iframe>
<script language= "javascript ">
function addRow()
{
var t = document.getElementById( "tab1 ").getElementsByTagName( "tbody ")[0];
var r = t.insertRow(t.rows.length);
var c = document.createElement( "td ");
r.appendChild(c);
try{
document.getElementById( "ihRow ").childNodes[0].childNodes[0].onchange=function(){}
document.getElementById( "ihRow ").setAttribute( "id ", " ");
}catch(e){}
var trObj = t.rows[0].cloneNode(true);
trObj.setAttribute( "id ", "ihRow ");
t.insertBefore(trObj,r);
t.removeChild(r);
}
</script>
</body>
</html>