cloneNode problems

GJay

06-08-2006, 04:41 PM

I have a table, with a number of rows. At the end of each row, in a cell, is a checkbox that is used to 'select' a row.
I have a button that, when clicked, iterates through the checkboxes and copies the selected table-rows and 'pastes' them at the bottom of the table.
The table-rows contain form-elements, that want to be cloned exactly, except for one that needs to increase in value.

I have most of this working, except that select elements, when cloned, don't seem to recognise that they have been changed. e.g. if, after the page has loaded, I change the value of a select, then when the row is copied, the copy has the original value selected.

The (I think...) relevant code (there are a couple of prototype.js bits, but they should be self-explanatory...):

function copySelected() {
var boxes=document.getElementsByClassName('copyrow','gridform');
var newid=count;
var checkedboxes = new Array();

var els=$('gridform').getElementsByTagName('tbody')[0].getElementsByTagName('tr');

boxes.each(function(box) {
if(box.checked) {
var oldrow=box.parentNode.parentNode;
var clonerow=oldrow.cloneNode(true);
clonerow.id='row'+newid;
clonerow.hide();
clonerow.getElementsByTagName('input')[0].value=newid;
$('gridform').getElementsByTagName('tbody')[0].appendChild(clonerow);
var newrow=$('row'+newid);
box.checked=false;
Effect.Appear(newrow);
newid++;
}
});
count+=100;
}

vwphillips

06-09-2006, 10:26 AM

There is no problem in cloning selects

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function AddSel(){
var frm=document.getElementById('Frm');
var cl=document.getElementById('Clone').getElementsByTagName('SELECT')[0].cloneNode(true);
frm.appendChild(cl);
}

function Tst(obj){
alert(obj.selectedIndex);
}
/*]]>*/
</script>
</head>

<body onload="AddSel();AddSel();AddSel();AddSel();" >

<form id="Frm" >

nn
</form>
<br />
<br />
<br />

<div id="Clone" >
<select onchange="Tst(this);" >
<option >Option 0</option>
<option >Option 1</option>
<option >Option 2</option>
<option >Option 3</option>
</select>
</div>
</body>

</html>

t they should be self-explanatory.

than may be so but are they correct??

GJay

06-09-2006, 02:09 PM

If I adjust that script so that AddSel() is called on a button-click, rather than onload, then it acts with exactly the problem I'm having.
The select clones fine, but if I change it's value after the page loads, that change isn't preserved.
If I explicitly tell it to copy the selectedIndex then that works (in FF at least, IE was problematic, but this can afford to be FF-only), but I was hoping not to have to add more steps...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function AddSel(){
var frm=document.getElementById('Frm');
var cl=document.getElementById('Clone').getElementsByTagName('SELECT')[0].cloneNode(true);
frm.appendChild(cl);
}

function Tst(obj){
alert(obj.selectedIndex);
}
/*]]>*/
</script>
</head>

<body>
<input type="button" onclick="AddSel();" />
<form id="Frm" >

nn
</form>
<br />
<br />
<br />

<div id="Clone" >
<select onchange="Tst(this);" >
<option >Option 0</option>
<option >Option 1</option>
<option >Option 2</option>
<option >Option 3</option>
</select>
</div>
</body>

</html>

Kor

06-12-2006, 09:44 AM

function AddSel(){
var frm=document.getElementById('Frm');
var sel=document.getElementById('Clone').getElementsByTagName('select')[0]
var cl=sel.cloneNode(true);
cl.options[sel.selectedIndex].selected=true;
frm.appendChild(cl);
}