[英]How to clone and append a table row
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. 当用户单击+
按钮时,我试图复制显示的行并将其附加在下面,但还要使用“删除”链接,以便在“ Component Thickness
列后添加类似内容。
<td><a href='#' id='remove'>Remove</a></td>
Only anything after the first row should include this remove link. 第一行之后的所有内容都不应包含此删除链接。
HTML 的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. 下拉列表是用PHP
生成的,用于选项的数据已从数据库中查询出来,如果您想了解我的操作方式(我认为这并不重要),我可以进行编辑并包括编码。
Here is what I have so far in regards to JQuery 到目前为止,这是我对JQuery的了解
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. 这会将另一行追加到表中,但显然不包括我的下拉菜单,也没有添加remove
链接。
I have tried $("#component_tb").clone().appendTo("component_tb");
我试过$("#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. 在您尝试的过程中,您忘记了在ID之前包含#
,这就是为什么它不起作用的原因,但是它仍然会将整个元素附加到自身上,从而导致各种问题。
What you need to clone is the first <tr>
. 您需要克隆的是第一个<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. 需要.clone()
,因为否则将永久存储在$firstTRCopy
存储的元素,并且如果从DOM中删除了该元素,则尝试再次添加它时不会得到任何东西。 This way, it can be cloned every time it's needed. 这样,可以在每次需要时将其克隆。
In your code you have a text input with the ID component_thickness
. 在您的代码中,您将使用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. 尽管此代码本身不会导致出现重复的ID,但您需要编辑该输入并删除ID,可能使它成为一个类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.