使用 jquery 调整表布局/结构

Question

如何使用 jquery 执行以下操作？

我有一个三行表和一个标题行。像这样：

<%@ 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>

我想克隆该表的最后一行，删除除标题行之外的所有行，附加克隆的行（最后一行）并隐藏它（克隆的行）。

我知道如何分别执行这些操作。

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

在删除所有行（但标题）后，我正在努力追加克隆行。

任何帮助将不胜感激。

Answer 1

您需要保留对克隆行的引用：

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

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

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