用最後一個表格行旁邊的數字替換表格行號

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

你可以做的是抓住當前行的id，選擇後續行，並使用jQuery的nextAll遍歷它們並執行你需要的更新。

編輯：更新包括AddRow邏輯和固定的結合問題

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

<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>

Answer 2

也許這樣的事情（你會修改開始刪除的行的「數字」的每一行的屬性）：

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 3

也許通過行的其餘迭代（刪除一個後），並減少其數字1？

Answer 4

我認爲你正在尋找迭代所有錶行並更新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 5

道具@xorspark提供這種精確的解決方案！我剛剛修改了輸入ID與name屬性和其他部分相同以適合我的代碼。也感謝@anied！謝謝大家的幫助！ :)

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

<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>