can you copy a table row with js function ??

[paula dougherty]

Hi

I want to copy a row within a table and append it onto the end of the same table.
I can get the row using getElementId but do I then have to go through
1. Inserting a blank row onto the end of the table
2. Retrieve the contents of each cell of the row to be copied and build up the new row cell by cell
3. Add the cell to the end of the table.

or is there a simple way or retrieving the row I want to copy and assigning th e whole row to a new row at the end of the table

thanks

[jpalfree]

You could try something like this...

var table = document.getElementById('myTable');
var row = table.rows[0];
table.innerHTML += row.innerHTML; //append the first row html text
// to the table html text


I tried it out... it worked for me.

[Kor]

better use cloneNode() DOM method

var tab = document.getElementById('myTable');
var root=tab.getElementsByTagName('tr')[0].parentNode;//the TBODY
var clone=tab.getElementsByTagName('tr')[0].cloneNode(true);//the clone of the first row
root.appendChild(clone);//appends the clone


Note: the clone is "unique" on method. That means if you want to append again the clone, you must again use the cloneNode() method. A clone is to be used only once. Second time you must repeat the cloning operation.

In fact all the DOM created elements are to be used only once. If a repeaded append, a repeated creation is necessary.

[Kravvitz]

You could try something like this...

var table = document.getElementById('myTable');
var row = table.rows[0];
table.innerHTML += row.innerHTML; //append the first row html text
// to the table html text


I tried it out... it worked for me.
That won't work in IE. (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp) Besides, since innerHTML is non-standard, browser implementations differ, which can result in scripts that use it not working in some browsers.