如何克隆，并附加表行

enter image description here

当在+用户点击按钮，我试图复制出该行并低于其追加，而且在Component Thickness列之后还有一个删除链接。

<td><a href='#' id='remove'>Remove</a></td>

第一行后，只有什么应该包括这个删除链接。

HTML

<table id="component_table"> 
    <thead> 
     <tr> 
      <th>Component</th> 
      <th>Component Type</th> 
      <th>Component Thickness</th> 
     </tr> 
    </thead> 
    <tbody id="component_tb"> 
     <tr> 
      <td><?php echo $roofComponentDropDown ?></td> 
      <td><?php echo $roofComponentTypeDropDown ?></td> 
      <td><input id="component_thickness" name="component_thickness" type="text"></td> 
     </tr> 
    </tbody> 
</table> 
<input type="button" value="+" id="addRows" />

的下拉菜单在PHP产生和我使用的选项的数据查询从数据库中，如果你想看看我是怎么做这个（我不要以为重要）我可以编辑并包含代码。

这里是我迄今为止在关于JQuery的

JQuery的

$(function() { 
    $("#addRows").click(function() { 
     $("#component_tb").append("<tr><td>new row</td> <td>new row</td> <td>new row</td> <a href='#' id='remove'>Remove</a> </tr>"); 
    }); 
});

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

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

任何帮助将是真棒，

感谢

来源

2015-04-02 Zoxac

@ DJDavid98我有一种感觉，我可能最终会遇到这个问题。 – Zoxac 2015-04-02 22:18:05

在你尝试过什么，你忘了，包括在ID前#，这就是为什么它没有工作，但它仍然会将整个元素附加到自身上，导致各种问题。

你需要克隆的是第一个<tr>。

$(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，可能会使其成为课程。

来源

2015-04-03 09:30:05 SeinopSys

这个作品谢谢！ – Zoxac 2015-04-06 12:22:27

我会如何添加此以避免身份证复制？ 'var cloneCount = 1;'...'.attr（'id'，'id'+ cloneCount ++）;'这会有很大的帮助，并且不必开始另一个问题，谢谢。 – Zoxac 2015-04-06 13:02:07

@BigRabbit查看我的编辑。如果您使用我的代码，那么该行或表体的ID将不会被复制，唯一的问题是输入应该很容易解决，因此您不必担心重复的ID。 – SeinopSys 2015-04-06 16:24:27

-2

Try this这将克隆表

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

来源

2015-04-02 18:11:31

这不帮助我，请阅读我的问题。 – Zoxac 2015-04-02 18:52:29

如何克隆，并附加表行

回答

相关问题