[英]Cloning closest table row
I recently asked this question 我最近问了这个问题
Since then I have discovered that what I wanted to do wont work. 从那时起,我发现自己想做的事行不通。 This is because the table is generated by a for loop, with their id incrementing each time.
这是因为该表是由for循环生成的,其id每次都会递增。 As such, I needed to amend things so that it would add rows for the table it is supposed too.
因此,我需要修改一些东西,以便它也可以为该表添加行。 I have updated my fiddle to show an example with two table JSFiddle
我已经更新了小提琴以显示带有两个表JSFiddle的示例
Essentially, I now do this 基本上,我现在要这样做
$(function() {
$(".addCF").click(function(){
var clone = $(this).closest('tr').clone(true).insertAfter($(this).closest('tr'));
});
$("#customFields").on('click','.remCF',function(){
$(this).parent().parent().remove();
});
});
I can get the name and label of the cloned rows done myself using the previous examples. 我可以使用前面的示例自己完成克隆行的名称和标签。 My main problem is that I do not want to clone the whole row.
我的主要问题是我不想克隆整个行。 At the moment, it is cloning this
目前,它正在克隆
<tr>
<td><label class="subjectline" for="User1">User NOC M1</label></td>
<td id="slLabel">SL_A</td>
<td id="slInput"><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td>
<td><a class="addCF" href="javascript:void(0);">+ additional user</a></td>
</tr>
I need it to clone this but make the first td empty. 我需要它来克隆它,但将第一个td设为空。 Additionally, like the initial question, the last td should be a close button
另外,像最初的问题一样,最后一个td应该是一个关闭按钮
<a href="javascript:void(0);" class="remCF">Remove</a>
Is it possible to do this? 是否有可能做到这一点?
Thanks 谢谢
From the cloned tr
, 从克隆的
tr
,
empty
its first-child
( td
) 's content. empty
其first-child
( td
)的内容。 last-child
(td) 's html as the close element's html, last-child
(td)的html设置为close元素的html, $(function() {
$(".addCF").click(function(){
var clone = $(this).closest('tr').clone(true);
$("td:first-child", clone).empty();
$("td:last-child", clone).html('<a href="javascript:void(0);" class="remCF">Remove</a>');
clone.insertAfter( $(this).closest('tr'));
});
$("table.table").on('click','.remCF',function(){
$(this).parent().parent().remove();
});
});
You need to change your Cloned TR's html: 您需要更改克隆的TR的html:
HTML: HTML:
<table id="customFields1" class="table table-bordered table-hover additionalMargin alignment">
<thead>
<tr>
<th colspan="2"></th>
<th>Some Title</th>
</tr>
</thead>
<tbody>
<tr>
<td><label class="subjectline" for="User1">User NOC M1</label></td>
<td id="slLabel">SL_A</td>
<td id="slInput"><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td>
<td><a class="addCF" href="javascript:void(0);">+ additional user</a></td>
</tr>
</tbody>
</table>
<table id="customFields2" class="table table-bordered table-hover additionalMargin alignment">
<thead>
<tr>
<th colspan="2"></th>
<th>Some Title</th>
</tr>
</thead>
<tbody>
<tr>
<td><label class="subjectline" for="User1">User NOC M1</label></td>
<td id="slLabel">SL_A</td>
<td id="slInput"><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td>
<td><a class="addCF" href="javascript:void(0);">+ additional user</a></td>
</tr>
</tbody>
</table>
JQUERY: JQUERY:
$(function() {
$(".addCF").click(function(){
var closest_tr =$(this).closest('tr').clone(true);
closest_tr = $(closest_tr).find("td:first").html("").parent();
var clone = closest_tr.insertAfter( $(this).closest('tr'));
});
$("#customFields").on('click','.remCF',function(){
$(this).parent().parent().remove();
});
});
DEMO: https://jsfiddle.net/116hvkhe/ 演示: https : //jsfiddle.net/116hvkhe/
is this something you were looking for: https://jsfiddle.net/8zwf9njr/13/ 这是您正在寻找的东西吗: https : //jsfiddle.net/8zwf9njr/13/
$(".addCF").click(function(){
var clone = $(this).closest('tr').clone(true);
clone.find('td:first-child').html('');
clone.find('td:last-child').html('<a href="javascript:void(0);" class="remCF">Remove</a>');
clone.insertAfter( $(this).closest('tr'));
});
you find the first td
element of the clone and empty it. 您会找到克隆的第一个
td
元素并将其清空。 then you find the last td
of the clone and you replace whatever is in it with your remove button. 然后找到克隆的最后一个
td
,然后用删除按钮替换其中的所有内容。
ps. PS。 i think there's also a typo in your original remove click code: it should be
$("#customFields1").on('click',
instead of just #customFields
. alternatively you can target both tables by using a more generic selector like table
or add a class to the tables and use that. 我认为您原来的删除点击代码中也有一个错字:应该是
$("#customFields1").on('click',
而不是#customFields
。或者,您也可以使用更通用的选择器(例如table
来定位两个table
或在表中添加一个类并使用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.