如何克隆和追加表格行

Question

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

当用户点击+按钮时，我正在尝试复制显示的行并将其附加到下方，但也会在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");试图看看我是否可以克隆我的行（不添加删除链接）来工作，但是当我点击我的按钮时什么也没发生。

任何帮助都会很棒，

由于

Answer 1

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

您需要克隆的是第一个<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，这可能会使它成为一个类。

Answer 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);
});