如何在jQuery的clone()方法中为新添加的表行添加删除按钮

How to add the delete button to a newly appended table row present in clone() method in jQuery?

本文关键字：新添加 添加删除按钮 添加 方法 jQuery clone      更新时间：2023-09-26

在单击Add按钮时向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>中添加此按钮代码，其中"产品选择控件"存在(I)。e在代码标签之后，在新添加行的第一列之前)。我该如何做到这一点?有人能给我提供一个实现这一目标的方法吗?如果你有任何其他的逻辑，而不是使用clone()方法，这将是好的。没有问题。提前感谢。

如果你想在选择标签后面'追加'按钮，你应该这样做。

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

在

前面添加这段代码
tbody.append(new_row);

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

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

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>'
);

更新小提琴

相关文章：