如何克隆和追加表格行

我有一个看起来像这样的表：

当用户点击+按钮时，我试图复制显示的行并将其附加到下面，但也会在“ Component Thickness列之后使用删除链接。

Remove

只有第一行之后的任何内容都应该包含此删除链接。

HTML

 
 
 
 
Component
 
Component Type
 
Component Thickness
 
 
 
 
 
 
 
 
 
 
  

下载是在PHP中生成的，我用于选项的数据是从数据库中查询的，如果你想知道我是怎么做的（我认为这不重要）我可以进行编辑和包含代码。

这是我到目前为止关于JQuery的内容

JQuery的

 $(function() { $("#addRows").click(function() { $("#component_tb").append("new row new row new row Remove "); }); }); 

这会在我的表中添加另一行，但显然不包括我的下拉列表，也不会添加remove链接。

我试过$("#component_tb").clone().appendTo("component_tb"); 只是为了试着看看我是否可以克隆我的行（没有添加删除链接）来工作，但是当我点击我的按钮时什么也没发生。

任何帮助都是极好的，

谢谢

Answer 1

在您尝试的内容中，您忘记在ID之前包含# ，这就是为什么它不起作用，但它仍然会将整个元素附加到自身，从而导致各种问题。

你需要克隆的是第一个

。

 $(function() { var $componentTB = $("#component_tb"), $firstTRCopy = $componentTB.children('tr').first().clone(); $("#addRows").click(function() { $componentTB.append($firstTRCopy.clone()); }); }); 

需要双.clone() ，因为存储在$firstTRCopy的元素会永久地附加，如果它从DOM中删除，当你尝试再次追加它时，你将得不到任何东西。 这样，它可以在每次需要时克隆。

---

在您的代码中，您有一个ID为component_thickness的文本输入。 虽然此代码本身不会导致出现重复的ID，但您需要编辑该输入并删除ID，这可能使其成为一个类。

Answer 2

试试这将克隆一个表

 $("input.tr_clone_add").live('click', function() { var $tr = $(this).closest('.tr_clone'); var $clone = $tr.clone(); $clone.find(':text').val(''); $tr.after($clone); });