Question

$(document).on('click', '#add', function () {
    var newItemHTML = "<tr class='additionalcomplainant'><td><center><input type='text' name='' id='' /><br> <small><i>First Name</i></small></center></td><td><center><input type='text' name='' id='' /><br> <small><i>Middle Name</i></small></center></td><td><center><input type='text' name='' id='' /><br> <small><i>Last Name</i></small> </center></td></tr><tr class='additionalcomplainant'><td><center><input type='text' name='' id='' /><br> <small><i>City/Province</i></small></center></td><td><center><input type='text' name='' id=''/><br> <small><i>Town/Municipality</i></small></center></td><td><center><input type='text' name='' id='caseinfocomplaintlname' /><br> <small><i>Barangay/District</i></small></center></td> </tr><tr class='additionalcomplainant'><td><center><input type='text' name= id='' /><br> <small><i>Contact Number</i></small></center></td></tr>";
    $("table#t1table tr").last().before(newItemHTML);
});

$(document).on('click', '#remove', function () {

});

这是我如何使用jquery在我的表中添加行。如何在另一个按钮单击上删除相同的行集。我想删除这些行，例如，如果用户错误地单击了按钮，并且行数超过了需要的行数

Answer 1

您可以保留对添加的行的引用：

var addedRows = [];
$(document).on('click', '#add', function() {
    var $row = $("<tr class='additionalcomplainant'><td><center><input type='text' name='' id='' /><br> <small><i>First Name</i></small></center></td><td><center><input type='text' name='' id='' /><br> <small><i>Middle Name</i></small></center></td><td><center><input type='text' name='' id='' /><br> <small><i>Last Name</i></small> </center></td></tr><tr class='additionalcomplainant'><td><center><input type='text' name='' id='' /><br> <small><i>City/Province</i></small></center></td><td><center><input type='text' name='' id=''/><br> <small><i>Town/Municipality</i></small></center></td><td><center><input type='text' name='' id='caseinfocomplaintlname' /><br> <small><i>Barangay/District</i></small></center></td> </tr><tr class='additionalcomplainant'><td><center><input type='text' name= id='' /><br> <small><i>Contact Number</i></small></center></td></tr>");
    addedRows.push($row);
    $("#t1table tr").last().before($row);
});

$(document).on('click', '#remove', function() {
    var $row = addedRows.pop();
    if ($row) $row.remove();
});

在上面的代码中，我保留了一个数组。添加的行将推送添加到结尾，并且在删除时从结尾删除它们（使用pop）。如果你决定在表中的随机位置添加，那么它仍然有用。

或者，假设除了您添加的行之外没有任何其他.additionalcomplainant行，您可以这样做

$(document).on('click', '#remove', function() {
    $('#t1table .additionalcomplainant').last().remove();
});

顺便说一句，不要使用"table#t1table"作为选择器："#t1table"相同且更快。

Answer 2

选项＃1

按类名删除。您添加了classname =“additionalcomplainant”的行，因此您只需使用此类的CSS选择器删除它们

$(document).on('click', '#remove', function () {
    $(".additionalcomplainant").remove();
});

选项＃2

添加新行时，为它们添加一些临时类名。如果要删除它们，请使用此类的选择器。如果要在最后一次“添加”操作后添加一些行，则从添加的行中删除临时类，然后将其重新添加到最近添加的行中。

$(document).on('click', '#add', function () {
    var tbl = $("table#t1table tr");
    var newRows = $(...).addClass('extraRows');
    tbl.find('tr').removeClass('extraRows');
    tbl.last().before(newRows);
});

$(document).on('click', '#remove', function () {
    $("table#t1table tr").find(".extraRows").remove();
});

选项＃3

如果此类名不是唯一的并且您无法更改它，那么请记住在添加之前表中有多少行并删除那些超出该范围的行

var options.rows = {
    rowsCount : 0
};

$(document).on('click', '#add', function () {
    var tbl = $("table#t1table tr");
    var newRows = ...
    options.rows = tbl.find('tr').length;
    tbl.last().before(newRows);
});

$(document).on('click', '#remove', function () {
    $("table#t1table tr").find("tr:gt(" + options.rows + ")")
});

Answer 3

只需删除最后一行，

$(document).on('click', '#remove', function () {

    $("table#t1table tr:last").remove()

});

Answer 4

要附加到表格中：

$('#myTable tbody').append(newItemHTML);

删除添加的行：

$('#myTable .additionalcomplainant:last').remove();

删除添加的行集

4 个答案: