如何克隆和附加表格行 [英] How to clone and append a table row

问题描述

我有一张如下所示的表格：

当用户点击 + 按钮时，我试图复制行在组件厚度列之后显示并追加它，而且还带有一个删除链接，所以类似这样。

< td>< a href ='＃'id ='remove'>移除< / a>< / td>

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

HTML

 < table id =component_table> 
< thead> 
< tr> 
< th>组件< / th> 
< th>组件类型< / th> 
元件厚度< / th> 
< / tr> 
< / thead> 
< tbody id =component_tb> 
< tr> 
< td><？php echo $ roofComponentDropDown？>< / td> 
< td><？php echo $ roofComponentTypeDropDown？>< / td> 
< td>< input id =component_thicknessname =component_thicknesstype =text>< / td> 
< / tr> 
< / tbody> 
< / table> 
< input type =buttonvalue =+id =addRows/> 
  

下拉菜单正在 PHP 如果你想知道我是如何做这件事的（我认为它不重要），我可以编辑并包含代码。

b
$ b

这是我迄今为止关于JQuery的内容

JQuery

  $（function（）{
 $（＃addRows）。click（function（）{
 $（＃新行< td>新行< / td>< t h>新行< / td>< a href ='＃'id ='删除'>删除< / a>< / tr>）; 
}）; 
}）; 
  

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

我试过 $（＃component_tb）。clone（）。appendTo（component_tb）; 只是试图查看我是否可以克隆我的行（无需添加删除链接），但是当我点击我的按钮时，什么都没有发生。

任何帮助都很棒，

谢谢

＃，这就是为什么它不起作用，但仍然它会将整个元素附加到自身上，造成各种各样的问题。

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

  $（function（）{
 var $ componentTB = $（＃ （）; $ b $（$＃$'$'$'$'$'$'$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $'$' b $ componentTB.append（$ firstTRCopy.clone（））; 
}）; 
}）; 
  

双 - .clone（）是因为存储在 $ firstTRCopy 中的元素会永久地被永久追加，并且如果它从DOM中被移除，当您尝试再次追加时，您将不会得到任何东西。这样，每次需要时都可以克隆它。

---

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

I have a table that looks like this:

When the user clicks on the + button I am trying to copy the row shown and append it below, but also with a remove link so something like this after the Component Thickness column.

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

Only anything after the first row should include this remove link.

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" />

The drop downs are being generated in PHP and the data I am using for the options are queried out of a database, if you want to see how I am doing this (I don't think it matters) I can make an edit and include the code.

Here is what I have so far in regards to 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>");
    });
});

This appends another row to my table but obviously doesn't include my dropdowns, nor does it add a remove link.

I have tried $("#component_tb").clone().appendTo("component_tb"); just to try to see if I can get the cloning of my row (without adding a remove link) to work, but when I clicked my button nothing at all happens.

Any help would be awesome,

Thanks

解决方案

In what you tried, you forgot to include the # before the ID, that's why it didn't work, but still it would've appended the entire element to itself, causing all sorts of issues.

What you need to clone is the first <tr>.

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

The double-.clone() is needed because the element stored in $firstTRCopy would get appended permanently otherwise, and in case it's removed from the DOM, you'll not get anything when you try to append it again. This way, it can be cloned every time it's needed.

---

In your code you have a text input with the ID component_thickness. While this code in itself will not cause duplicate IDs to appear, you will need to edit that input and get rid of the ID, probably making it a class.

这篇关于如何克隆和附加表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！