Question

How can I perform the following action using jquery?

I have a table with three rows and a header row. something like this:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Import Namespace="MyModel.Model" %>
<div>
<table id="MyTable">
        <tr>
            <th>
                Select1
            </th>
            <th>
                Select2
            </th>
            <th>
                Text1
            </th>            
        </tr>

        <tr>
            <td>
                <select name="Select1"></select>
            </td>
            <td>
                <select name="Select2"></select>
            </td>
            <td>
                <input name="Input1"/>
            </td>            
        </tr>    
</table>
</div>

I want to clone the last row of this table, remove all rows but header row, append the cloned row(last row) and hide it(cloned row).

I know how to perform these actions separately.

$("#MyTable tr:last").clone()
$("#MyTable tr>td").remove()
$("#MyTable tr:last").appendTo('#MyTable tr:first')
$("#MyTable tr:last").hide()

I am struggling with appending the cloned row after removing all rows(but the header).

Any help would be appreciated.

Answer 1

You need to keep a reference to the cloned row:

var $lastrow = $("#MyTable tr:last").clone();

// removes actual tr's, but not the headers
$("#MyTable tr > td").parent().remove();

$lastrow
    .appendTo('#MyTable')
    .hide();