Question

我在php中获得了一些记录。在底部有一个＆＃39; Add More Rows＆＃39;，它克隆了最后一行。此页面中还会进行一些计算。现在我需要的是当我创建添加新行时，我需要显示一个＆＃39; x＆＃39;最后标记，如果我点击它，它应删除新创建的行。我怎样才能实现这一目标？我的小提琴如下：

FIDDLE

这是创建克隆元素的jquery脚本

$("#add_more").on('click', function(e) {
  e.preventDefault();
  var clone = $("#table tbody tr:last").clone();
  $("#table tbody").append(clone);
});

$("#submit").on('click', function(e) {
  e.preventDefault();
  alert($("#cart1").serialize());
});

Answer 1

对您的代码进行一些修改：

（1）在<thead>中，<td>应为<th>

（2）您只需要设置<th>中<thead>的宽度，<td>列将保持相同的宽度一直到表格

（3）为了帮助造型，我为每个<th>

添加了一个合适的类

（4）我在每个<td class="delTD">的末尾添加了一个新<tr>，并在其中添加了一个复选框。对于原始行，<input type="checkbox">控件具有类hidden。添加的行已删除该类，使checkbox仅对添加的行可见。单击时，jQuery将验证该行是否具有newTR类，如果存在，则删除该行。

javascript的主要变化：

$(document).on('click', '.delINP', function(){
    var rr = $(this).closest('tr');
    rr.addClass('row-highlighted');
    if (confirm('Are you sure you want to delete this row?')){
        if (rr.hasClass('newTR')) rr.remove();
    }else{
        rr.removeClass('row-highlighted');
        rr.find('td.delTD input').prop('checked',false);
    }
});

和

$("#add_more").on('click', function(e) {
    e.preventDefault();
    var clone = $("#table tbody tr:last").clone();
    clone.addClass('newTR');
    clone.find('td.delTD input').removeClass('hidden');
    $("#table tbody").append(clone);
});

和 CSS：

.hidden{display:none;}
.row-highlighted{background-color:red;}

Updated jsFiddle

Answer 2

尝试这......

 $(".remove").on('click', function(e) {
          e.preventDefault();
          $("#table tbody tr:last").remove();
        });

DEMO

Answer 3

$(document).on('click', "#add_more", function (e) {
e.preventDefault();
var clone = $("#table tbody tr:last").clone();
if (!$(clone).find('td').hasClass('deleteRow')) {
    $(clone).append('<td class="deleteRow">X</td>');
}
$("#table tbody").append(clone);

}）;

$(document).on('click', '.deleteRow', function () {
    $(this).closest('tr').remove();
});

Answer 4

SIGABRT

在行中删除td并在其上放置一个类并使用上面的代码

DEMO

使用.on()

描述：将一个或多个事件的事件处理函数附加到所选元素。

Answer 5

试试这个..

$("#add_more").on('click', function(e) {
  e.preventDefault();
  var clone = $("#table tbody tr:last").clone();
   $(clone).append('<td class="deleteRow">X</td>');
  $("#table tbody").append(clone);
});


$('.deleteRow').unbind('click').bind('click',function(){
   $(this).closest('tr').remove();
}):

如何删除在jquery中创建的动态行

FIDDLE

5 个答案: