Hello again people! Hope everyone is well! I have another JS question for you, hope you could help me out?
I’m currently working on code to remove and add rows in a table… But the rows I want to remove and then insert again into the table has a style, an onclick event, a few other attributes…
Is there a way of doing a straight copy of the row that is getting deleted? So when it comes to inserting it again, it will retain all the same attributes, style and events?
At the moment, I’m cycling through the cells in the row, copying the data within each cell, getAttribute stuff… But surely there maybe a simple way? I know of the moveRow JS method - but this seems IE only (probably the only good thing that IE has! haha)
Many thanks for any help people… Really hope I can get good enough so I can start helping people back! Cheers… (:
I can’t believe, also, that I’ve missed the site called QuirksMode.org for soooo long… This will really help me get my head together when it comes to Javascript. I’ve been coding for a few years, but never touched Javascript -believe it or not - it’s a funny old language isn’t it. But kind of cool for some reason…
Thanks again for your help. I’ll report back if it did what I’m expecting it to do.
But you don’t need to clone the node if you already have a reference to it.
<body>
<table>
<thead><th>Heading</th></thead>
<tbody id="myBody">
<tr id="moveMe"><td style="color:red;">Row 1</td></tr>
<tr><td style="text-align:center;">Row 2</td></tr>
<tr><td><input type="button" value="Remove Row 1" onclick="shiftRow();" /></td></tr>
</tbody>
</table>
<p><input type="button" value="Put it back" onclick="putBack();" /></p>
<script type="text/javascript">
// Get reference to a row in the table
var row = document.getElementById("moveMe");
// Now we have a reference, we can remove it from the table
function shiftRow(){
row.parentNode.removeChild(row);
}
// Even though the row has been removed, we still have a reference to the element.
// It is no longer in the document tree, it is not displayed
// but it is in memory
// and we can put it back at the bottom of the table, attributes pre-packaged
function putBack(){
var tbl = document.getElementById("myBody");
tbl.appendChild(row);
}
</script>
</body>
So, no need to create a copy of the row if we already have the original stored in memory.
I recall there being a problem when inserting a node that already exists but I had my wires crossed. I remembered a scenario where I had to remove an element and appending it simply moves it.
CHeers for this help… But I’m still having a problem here…
I need to basically take a particular row out of the table… This is cool as each row has a unique ID anyhow… So I can make a reference fine, and I can remove the row fine… But when it comes to inserting it again, how do I do it so I can insert into the table at a particular index… This is particular to my project here, but I basically have a new row index for the table, where the copied row needs to be put back in… I’ve tried insertRow(new_index) and try to appendChild and copy the referenced old row into that, but this obviously doesn’t work correctly as it’s copying a <tr> into a <tr> kind of thing…
Use the insertBefore(new, existing) method to insert the row before an existing row.
<body>
<table>
<thead><th>Heading</th></thead>
<tbody id="myBody">
<tr id="moveMe"><td style="color:red;">Row 1</td></tr>
<tr><td style="text-align:center;">Row 2</td></tr>
<tr id="beforeMe"><td><input type="button" value="Remove Row 1" onclick="shiftRow();" /></td></tr>
</tbody>
</table>
<p><input type="button" value="Put it back" onclick="putBack();" /></p>
<script type="text/javascript">
// Get reference to row to be removed
var row = document.getElementById("moveMe");
// Remove row
function shiftRow(){
row.parentNode.removeChild(row);
}
// Get reference to tbody
// Get reference to row before which we want to insert
// Insert row in right place
function putBack(){
var tbl = document.getElementById("myBody");
var tr = document.getElementById("beforeMe");
tbl.insertBefore(row, tr);
}
</script>
</body>
