如何将删除按钮添加到 jQuery 的 clone() 方法中新添加的表行中？答案

【问题标题】：How to add the delete button to a newly appended table row present in clone() method in jQuery?如何将删除按钮添加到 jQuery 的 clone() 方法中新添加的表行中？
【发布时间】：2014-06-17 16:43:20
【问题描述】：

单击“添加”按钮后，我将在 HTML 表中添加一个新行。 jsFiddle链接如下：http://jsfiddle.net/fgLHN/3/

上面的代码对我来说效果很好。但是我无法为每个新添加的行添加删除按钮。我尝试了下面的代码，但没有奏效。控制台报错。

$(document).ready(function () {
  $('.btnAdd').click(function () {
    var new_row = $('#reb1').clone()+'<button style="margin: -26px -14px;float: right; color:#C00; opacity: 2;" type="button" class="close" onclick="deleteRow(this)" data-dismiss="alert" aria-hidden="true">&times;</button>';
    var tbody = $('tbody', '#blacklistgrid');
    var n = $('tr', tbody).length  + 1;
    new_row.attr('id', 'reb' + n);
    $(':input', new_row).not('.prod_list').remove();
      tbody.append(new_row);
   });
});

我想在新添加的<tr> 的<td> 中添加此按钮代码，其中存在“产品选择控件”（即在代码 标记之后但在新的第一列的 之前添加行）。我应该如何实现这一目标？有人可以为我提供一种实现这一目标的方法吗？如果您有任何其他逻辑而不是使用clone() 方法，那就没问题了。没有问题。提前致谢。如果您需要任何进一步的信息，请告诉我。

【问题讨论】：

您希望按钮显示在最后一个 td 或新行的确切位置？
@BatuZet：我希望按钮出现在新添加行的第一个中。在包含 Selct Prodcut 下拉列表的同一中。一旦此下拉列表的结束标记完成，按钮应该会显示，然后应该会关闭。

标签： javascript jquery html html-table tablerow

【解决方案1】：

如果你想在选择标签之后“附加”按钮，这是你应该尝试做的。

$('<button>Delete row</button>').appendTo( $(new_row.find('td:first')) );

在前面添加这段代码

tbody.append(new_row);

并且您应该能够在选择标记的右下方看到按钮。逻辑很简单——你告诉 jQuery 找到新创建行的第一个单元格，并在其末尾附加一个按钮。因为我们在那里有一个选择框，所以按钮会出现在它后面。代码很简单，所以对你来说应该是一个好的开始。

【讨论】：

您的想法运行良好。但是在删除同一行时遇到问题。那是 deleteRow() 函数的问题。我已将代码添加到我的小提琴中。更新的小提琴链接是jsfiddle.net/fgLHN/10你能纠正这个问题吗
现在运行完美。赞成答案并更新了小提琴。也接受了你的回答。

【解决方案2】：

您可以在添加新行之前执行此操作

new_row.find("td:eq(1)").html(
  '<button style="color:#C00; opacity: 2;" type="button" class="close" onclick="deleteRow(this)" data-dismiss="alert" aria-hidden="true">&times;</button>'
);

UPDATED FIDDLE

【讨论】：