cloneNode and appendChild problem in adding table row

[johkar]

This is a shortened version of my problem. Below I am cloning the first
data row and appending it to create a new row. If you make selections/add
values and then press Add Row, the text box value is carried to the new
row's text element also (the select doesn't retain it's selected value).
How can I create a new row with the form elements in the original no value
state? I tried cloning the Node on page load, but then it only allows me to
add one row. Is there a way to clone the row and retain it to add as many
rows as I like. I know I can clear all the values of the row after I create
it, but that seems like a long way around especially since I have many
fields in my actual code.

Any pointers appreciated,

John

<form name="myForm" method="post">
<input type="button" value="Add Row" onclick="addRow()">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tbody id="datatable">
<tr>
<td>
<select name="mySelect">
<option>Select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
</select>
</td>
<td>
<input type="text" name="myTextfield">
</td>
</tr>
</tbody>
</table>
</form>
<script language="JavaScript">
function addRow(){
var myTbody=document.getElementById('datatable');
newRow=myTbody.firstChild.cloneNode(true);
myTbody.appendChild(newRow);
}
</script>

[Martin Honnen]

johkar wrote:

This is a shortened version of my problem. Below I am cloning the first
data row and appending it to create a new row. If you make selections/add
values and then press Add Row, the text box value is carried to the new
row's text element also (the select doesn't retain it's selected value).

I have made a test case for that recently for a bugzilla entry for Mozilla
http://bugzilla.mozilla.org/attachme...42&action=view
If you try that test case with different browsers (Mozilla, IE, Opera)
then you will find that if you want to ensure across browsers that the
state of a HTML form control (e.g. the value property for text controls,
the checked property for radio or checkbox controls, the selectedIndex
for select) is cloned you need to do that in your script explicitly.
Opera 7 doesn't clone any of the above named properties, and Mozilla
some of them, and IE/Win some other.
As cloneNode is part of the W3C DOM Core module there is unfortunately
nothing to be demanded from the W3C DOM specification what should happen
with properties of HTML form controls.
--

Martin Honnen
http://JavaScript.FAQTs.com/

[Lasse Reichstein Nielsen]

"johkar" <no********@link.net> writes:

Below I am cloning the first data row and appending it to create a
new row. If you make selections/add values and then press Add Row,
the text box value is carried to the new row's text element also
(the select doesn't retain it's selected value). How can I create a
new row with the form elements in the original no value state?
The cloneNode method copies all the attributes, including the value
attribute, so there is no way to copy the row but not the values
using cloneNode.
I tried cloning the Node on page load, but then it only allows me to
add one row. Is there a way to clone the row and retain it to add
as many rows as I like.

Same way. Just remember to insert a *new* clone each time. So, onload
you make a clone of the empty row. Each time you want to insert a new
row, you make a new clone of the first clone, and insert it.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[johkar]

Thank you both. I thought I had tried to "clone my clone" before, but I
went back and tried it the next day and it worked like a charm. Late day I
guess.

John

"johkar" <no********@link.net> wrote in message
news:Pl***************@newsread2.news.pas.earthlin k.net...

This is a shortened version of my problem. Below I am cloning the first
data row and appending it to create a new row. If you make selections/add
values and then press Add Row, the text box value is carried to the new
row's text element also (the select doesn't retain it's selected value).
How can I create a new row with the form elements in the original no value
state? I tried cloning the Node on page load, but then it only allows me to add one row. Is there a way to clone the row and retain it to add as many
rows as I like. I know I can clear all the values of the row after I create it, but that seems like a long way around especially since I have many
fields in my actual code.

Any pointers appreciated,

John

<form name="myForm" method="post">
<input type="button" value="Add Row" onclick="addRow()">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tbody id="datatable">
<tr>
<td>
<select name="mySelect">
<option>Select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
</select>
</td>
<td>
<input type="text" name="myTextfield">
</td>
</tr>
</tbody>
</table>
</form>
<script language="JavaScript">
function addRow(){
var myTbody=document.getElementById('datatable');
newRow=myTbody.firstChild.cloneNode(true);
myTbody.appendChild(newRow);
}
</script>