Abhradip Abhradip - 3 months ago 18
Javascript Question

Issue regarding cloneNode in javascript

I am using javascript cloneNode method to clone a table row which is actually hidden. But the row is being cloned with that hidden property. I dont want that. I want that when that row will be cloned it will have visibility on.

That particular table row is:

<tr style="visibility:hidden;">
<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="latbox"/></td>
<td><img alt="Icon" src="/assets/add-icon.png" id="addmorePOIbutton" onclick="insRow()" /></td>
<td><img alt="Icon" src="/assets/minus-icon.png" id="delPOIbutton" onclick="deleteRow(this)"/></td>
</tr>


And the javascript code where I am cloning this row is:

var x=document.getElementById('POITable');
var new_row = x.rows[1].cloneNode(true);
x.appendChild( new_row );


So,how to set ,rather control the style of the new cloned row?
Please give some hints.

Please give me javascript solutions only (no jquery). I need to develop the project using javascript.

Thanks in advance!!!

Answer

First, use 0 instead 1 for the index.

next you can set style visibility to visible before adding the row to the table.

var x=document.getElementById('POITable');
var new_row = x.rows[0].cloneNode(true);
new_row.style.visibility = "visible";
x.appendChild( new_row )

Here is a fiddler

Comments