Question

我通过onclick按钮添加行。我没有在向最后一个表行添加/附加行并删除每个行的问题。我的问题是，如何使行号始终位于最后一行？

我添加行的代码：

var id_age;
function AddRow() {
    var rowCount = $('#dependent_table tbody tr').length;
        id_age = 'age_dependent_'+ rowCount;
        $("#dependent_table").append( "<tr>"+ "<td class='vert-align' style='width:45%;'><input type='text' class='form-control' name='name_dependent["+rowCount+"]' id='name_dependent_" + rowCount + "'></td>"+ "<td class='vert-align' style='width:10%;'><input type='text' class='form-control' name='age_dependent["+rowCount+"]' id='"+id_age+"' disabled></td>"+ "<td class='vert-align' style='width:35%;'><div class='col-md-12'><div class='form-group has-feedback' style='margin-top:12px;'><input class='form-control datePick' id='dob_dependent_"+ i +"' name='dob_dependent["+rowCount+"]' placeholder='YYYY-MM-DD' data-date-format='yyyy-mm-dd' type='text' onchange=\"CalculateAge(this.value,'" + id_age + "');\"/><i class='glyphicon glyphicon-calendar form-control-feedback'></i></div></div></td>"+ "<td class='vert-align' style='width:10%;'><button type='button' class='btn btn-danger btnDelete'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button></td>"+ "</tr>");
        rowCount++;
        $(".btnDelete").bind("click", Delete);
}

function Delete(){ 
    var par = $(this).parent().parent(); //tr 
    par.remove(); 
}

示例：

<tr id="dep_row_1">
    <td><input type="text" name="name_dependent[1]" value="value1"></td>
</tr>
<tr id="dep_row_2">
    <td><input type="text" name="name_dependent[2]" value="value2"></td>
</tr>
<tr id="dep_row_3">
    <td><input type="text" name="name_dependent[3]" value="value3"></td>
</tr>
<tr id="dep_row_4">
    <td><input type="text" name="name_dependent[4]" value="value4"></td>
</tr>

如果我删除中间的一行：

<tr id="dep_row_3">
    <td><input type="text" name="name_dependent[3]" value="value3"></td>
</tr>

然后表格现在应该是：

<tr id="dep_row_1">
    <td><input type="text" name="name_dependent[1]" value="value1"></td>
</tr>
<tr id="dep_row_2">
    <td><input type="text" name="name_dependent[2]" value="value2"></td>
</tr>
<tr id="dep_row_3">
    <td><input type="text" name="name_dependent[3]" value="value4"></td>
</tr>

dep_row_4 变为 dep_row_3 ，等等。

这可能吗？

使用我当前的代码，当我总共有5行而我删除了第4行时，最后一行的id仍为5，应为4。

非常感谢您的帮助。

谢谢！ -Eli

Answer 1

我认为您正在寻找迭代所有表行并更新name属性的代码。您可以使用函数和for循环执行此操作：

function updateNames() {
    var rows = $('#dependent_table tbody tr');
    var numOfRows = rows.length;
    var i;

    for (i=0; i<numOfRows; i++) {
        rows.eq(i).attr('name', 'name_dependent['+(i+1)+']');
    }
}

调用它将迭代并更新所有表行。

Answer 2

也许迭代其余的行（在删除的行之后）并将它们的数字减少1？

Answer 3

你可以做的是获取当前行的id，选择后续行并使用jQuery＆＃39; s nextAll进行迭代，然后执行所需的更新。

编辑：更新以包含AddRow逻辑和固定绑定问题

＆＃13;

var id_age;
function AddRow() {
    var rowCount = $('#dependent_table tbody tr').length;
        id_age = 'age_dependent_'+ rowCount; 
        $("#dependent_table tbody").append( "<tr id='dep_row_" + rowCount + "'>"+ "<td class='vert-align' style='width:45%;'><input type='text' class='form-control' name='name_dependent["+rowCount+"]' id='name_dependent_" + rowCount + "'></td>"+ "<td class='vert-align' style='width:10%;'><input type='text' class='form-control' name='age_dependent["+rowCount+"]' id='"+id_age+"' disabled></td>"+ "<td class='vert-align' style='width:35%;'><div class='col-md-12'><div class='form-group has-feedback' style='margin-top:12px;'><input class='form-control datePick' id='dob_dependent_"+ rowCount +"' name='dob_dependent["+rowCount+"]' placeholder='YYYY-MM-DD' data-date-format='yyyy-mm-dd' type='text' onchange=\"CalculateAge(this.value,'" + id_age + "');\"/><i class='glyphicon glyphicon-calendar form-control-feedback'></i></div></div></td>"+ "<td class='vert-align' style='width:10%;'><button type='button' class='btn btn-danger btnDelete'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button></td>"+ "</tr>");
        $("#dep_row_" + rowCount + " .btnDelete").bind("click", Delete); //bind the callback only to the newly created row's delete button
        rowCount++;        
}

function Delete() {
  var rowToDelete = $(this).parent().parent();
  var currentId = parseInt(rowToDelete.attr('id').split('_').pop());
  var nextRow = $('#dep_row_' + (currentId + 1)); //get the next row
  
  rowToDelete.remove(); //remove the current row
  
  if (nextRow) { //if there's another row
    nextRow.attr('id', 'dep_row_' + currentId); //replace the id with the old one
      // go through each input and rename
      $('input', nextRow).each(function() {
        var input = $(this);
        var inputName = input.attr('name').split('[')[0]; 
        input.attr('name', inputName + '[' + currentId + ']');
      });
    ++currentId;

    //do the same for the subequent rows
    console.dir(nextRow.nextAll());
    nextRow.nextAll().each(function() {
      var row = $(this);
      row.attr('id', 'dep_row_' + currentId);
      $('input', row).each(function() {
        var input = $(this);
        var inputName = input.attr('name').split('[')[0]; 
        input.attr('name', inputName + '[' + currentId + ']');
      });
      ++currentId;
    });
   }

}

$('#add').on('click', AddRow);

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add row</button>
<table id="dependent_table">
<tbody>
</tbody>
</table>

＆＃13;

Answer 4

也许是这样的（你会修改每一行的属性，以＆＃39;已删除行的数字＆＃39;）

function deleteRow(number) {
    // actions with row delete here ...

    // after delete row
    var counter = 1;
    $('#dependent_table tbody tr').each( function() {
        if(counter >= number) {
             $(this).attr('id', "dep_row_" + number);
             $(this).attr('name', "name_dependent[" + number + ']');
             // etc..
        }
        counter++;
    });
}

Answer 5

支持@xorspark提供这种精确的解决方案！我刚刚将输入id修改为与name属性和其他部分相同以适合我的代码。还要感谢〜陪伴！谢谢大家的帮助！：）

＆＃13;

var id_age;
function AddRow() {
    var rowCount = $('#dependent_table tbody tr').length;
        id_age = 'age_dependent_'+ rowCount; 
        $("#dependent_table tbody").append( "<tr id='dep_row_" + rowCount + "'>"+ "<td class='vert-align' style='width:45%;'><input type='text' class='form-control' name='name_dependent["+rowCount+"]' id='name_dependent_" + rowCount + "'></td>"+ "<td class='vert-align' style='width:10%;'><input type='text' class='form-control' name='age_dependent["+rowCount+"]' id='"+id_age+"' disabled></td>"+ "<td class='vert-align' style='width:35%;'><div class='col-md-12'><div class='form-group has-feedback' style='margin-top:12px;'><input class='form-control datePick' id='dob_dependent_"+ rowCount +"' name='dob_dependent["+rowCount+"]' placeholder='YYYY-MM-DD' data-date-format='yyyy-mm-dd' type='text' onchange=\"CalculateAge(this.value,'" + id_age + "');\"/><i class='glyphicon glyphicon-calendar form-control-feedback'></i></div></div></td>"+ "<td class='vert-align' style='width:10%;'><button type='button' class='btn btn-danger btnDelete'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button></td>"+ "</tr>");
        $("#dep_row_" + rowCount + " .btnDelete").bind("click", Delete); //bind the callback only to the newly created row's delete button
        rowCount++;        
}

function Delete() {
  var rowToDelete = $(this).parent().parent();
  var currentId = parseInt(rowToDelete.attr('id').split('_').pop());
  var nextRow = $('#dep_row_' + (currentId + 1)); //get the next row
  
  rowToDelete.remove(); //remove the current row
  
  if (nextRow) { //if there's another row
    nextRow.attr('id', 'dep_row_' + currentId); //replace the id with the old one
      $('input', nextRow).each(function() {
        var input = $(this);
        var inputName = input.attr('name').split('[')[0]; 
        input.attr('name', inputName + '[' + currentId + ']');
      });
    ++currentId;

    //do the same for the subequent rows
    console.dir(nextRow.nextAll());
    nextRow.nextAll().each(function() {
      var row = $(this);
      row.attr('id', 'dep_row_' + currentId);
      $('input', row).each(function() {
        var input = $(this);
        var inputName = input.attr('name').split('[')[0]; 
        input.attr('name', inputName + '[' + currentId + ']');
      });
      ++currentId;
    });
   }

}

$('#add').on('click', AddRow);

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add row</button>
<table id="dependent_table">
<tbody>
</tbody>
</table>

＆＃13;

将表行号替换为最后一个表行旁边的数字

5 个答案: