CODEWITHSUNDEEP
javascripthtmlcsshtml-tableclonenode
Abhradip
Abhradip

Reputation: 413

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.

Upvotes: 3

Views: 347

Answers (1)

xzegga
xzegga

Reputation: 3149

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

Upvotes: 4

Related Questions