使用jquery调整表格布局/结构

tweak table layout/structure with jquery

本文关键字：结构 布局 表格 jquery 调整 使用      更新时间：2023-09-26

如何使用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()

在删除所有行（除了标题）后，我很难追加克隆的行。

如有任何帮助，我们将不胜感激。

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

var $lastrow = $("#MyTable tr:last").clone();
// removes actual tr's, but not the headers
$("#MyTable tr > td").parent().remove();
$lastrow
    .appendTo('#MyTable')
    .hide();
相关文章：