Jquery：克隆 table 及其第一行

Question

我有一个像这样的标准 table 结构：

<table id="test">
  <th>...</th>
  <tr><td>one thing</td></tr>
  <tr><td>another</td></tr>
  ...
  ...
</table>

我知道如何克隆整个 table，或 table 的第 n 行，但我需要的是整个东西，除了第 2、3、4 等行table，换句话说：

<table id="test">
  <th>...</th>
  <tr><td>one thing</td></tr>
</table>

有什么想法吗？

Answer 1

"I know how to clone the entire table..."

然后执行此操作，克隆整个 table，然后删除不需要的内容。

select 除第一个 child 之外的所有内容的一个技巧是使用 *+*。 + select or in css 表示右侧紧邻左侧元素的匹配元素。

最后，你可以使用那个：

var $clone = $('#test').clone().find('tr+tr').remove().end();

$clone 将是您的克隆 table，只有第一行。

Answer 2

另一种解决方案是使用以下 child filter 选择器：:not(:first-child)。但是你有很多其他的解决方案结合了所有这些选择器。

var $clone = $("#test").clone();
$clone.find("tr:not(:first-child)").remove();    
$("#target").html($clone);

示例：http://jsfiddle.net/rnogdu0L/

$("#but").click(function() {
    var $clone = $("#test").clone();
    $clone.find("tr:not(:first-child)").remove();    
    $("#target").html($clone);
});

td {
    border: 1px solid blue;
}

#source {
    min-height: 20px;
    background: pink;
}

#target {
    min-height: 20px;
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
    <table id="test">
        <th>do not delete this</th>
        <tr><td>one thing</td></tr>
        <tr><td>another</td></tr>
    </table>
</div>

<div id="target">
</div>
<button id="but">Clone & Delete</button>

Jquery：克隆 table 及其第一行

Jquery: cloning a table and its first row

jquery

clone