在jQuery中克隆一个元素但不包括其子元素

Question

我有一个表格，想要克隆它但不包含其子元素。请注意，为了简洁起见，我省略了表格的许多属性和事件处理程序，它们也需要被复制。

<table data-x="..." class="a b c">
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    .
    .
    .
</table> 

我不想复制全部内容然后再删除子元素，我不确定但是我认为这样并不高效。

- kazinix

---

那么，为什么不使用jQuery创建“table”呢？ - Tushar

我认为jQuery没有这个功能，但你可以使用纯JavaScript实现。使用node.cloneNode()方法。但是这种方法不会复制附加的事件监听器 - https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode - Vigneswaran Marimuthu

@Tushar，请查看已编辑的帖子。我刚刚简化了标记。 - kazinix

@VigneswaranMarimuthu 我认为你应该把这个作为答案发布，所有的回复中，你的是真正的答案... - kazinix

哇！其他人只会抱怨，不愿合作并提供解决方案。我已经清楚地发布了帖子，他们却将其投票到死，并甚至想关闭它？Stack Overflow 怎么了？ - kazinix

Answer 1

我认为你不能仅使用 jQuery 克隆元素而不包括其子元素，但是你可以使用纯JavaScript的方式来实现。使用 node.cloneNode() 方法即可。但是此方法不会复制附加的事件监听器。

cloneNode

- Vigneswaran Marimuthu

---

我将从这个解决方案开始。现在我只需要复制所有的事件处理程序，这是我知道如何做的。 - kazinix

Answer 2

我认为你应该使用cloneNode()。

var $table = $('table');
var clone = $table[0].cloneNode(); //without deep property

演示：Fiddle

注意：任何jQuery监听器和相关数据都不会被复制

- Arun P Johny

Answer 3

尝试这个：如果你不需要它们，你可以删除子元素。

var newtable = $('table').clone();
newtable.find('tr').remove(); // or you can remove anything you want  to remove from it

现在在新表中，您将拥有一个没有任何行的表格。 希望这能起作用。

- Rohit Arora

---

我正在寻找一种更高效的方法，因此我不喜欢复制删除的解决方案。我有许多带有许多行的表格，我不能再使用这种解决方案了。 - kazinix

Answer 4

你可以轻松地使用jQuery .clone() 来完成它：

var $new_table = $('table').clone();
$newtable.html(''); // which returns <table></table>

- kosmos

---

这是克隆元素的解决方法。先克隆，然后修改。否则，您可以直接执行 var $new_table = $('<table/>');。 - kosmos

看，我已经知道了，我正在寻找更有效的方法。 - kazinix

这就是方法。使用委托事件，您可以轻松实现它。我不知道最简单（和更好）的方法来克隆一个元素（使用jQuery）。 - kosmos

不够清楚吗？这就是我正在做的，现在我正在寻找更有效的方式，我有很多表格，每个表格都有很多行，复制它们然后再删除它们不是一个选项。 - kazinix

然后稍微改一下，使用本地的.cloneNode()：var $new_table = $('table')[0].cloneNode()。 - kosmos

Answer 5

如果我想的话，你可以使用jQuery创建一个新表格。由于你没有提供你正在使用的代码，我给你提供一个例子。

<div id='tabdiv'>
</div>

简单的jQuery代码：

$('#tabdiv').html('<table></table');

这将在具有该新表的div中创建一个新的空表

- Sourabh Kumar Sharma