Question

我是jquery的新手。我有一个只有一行的表和一个最初显示的按钮。单击按钮时添加新行，并且td（序列号）中的行号递增。现在，当我删除表格时，将错过订购号码。如何在删除时重新排序数字。

var i = 1; //adding the row 
var k=1;
$("#add_ExpenseRow").click(function() {
    $('.datepicker').datepicker('destroy');
    myTr = $("#expense_table tbody tr:first").clone(true);
    myTr.find("input[type='text']").val('');
    myTr.show();
    myTr.appendTo("#expense_table tbody");
    var x = $("#expense_table tbody tr").length-1;
    for(k; k<x; k++){
        $("#expense_table tbody tr td:first").text(k+2);
    }
    //deleting the row
    $('#expense_table').delegate(".delRow",'click', function() {
        $(this).closest("tr").remove();
    });

由于

Answer 1

遍历表的所有tr并重新分配行号：

var number = 0;
$("#expense_table tbody tr").each(function(tr) {
  number++;
  $(tr).find("td:first").text(number);
});

之后，数字将再次上升

Answer 2

尝试

var rowCount = $('#expense_table tr').length;
$("#add_ExpenseRow").click(function () {
    myTr = $("#expense_table tbody tr:first").clone(true);
    myTr.find("input[type='text']").val('');
    myTr.show();
    myTr.appendTo("#expense_table tbody");
    rowCount++;

    myTr.find("td:first").text(rowCount);
})

//deleting the row
$('#expense_table').delegate(".delRow", 'click', function () {
    //don't allow to delete if the last row
    if (rowCount == 1) {
        return;
    }
    var $tr = $(this).closest("tr");
    $tr.nextAll().find('td:first').text(function (i, text) {
        return parseInt($.trim(text)) - 1;
    })
    $tr.remove();
    rowCount--;
});

演示：Fiddle

datatable在删除行时重新排序

2 个答案: