jQuery動態標識符重新排列

我正在嘗試爲表格行獲得直接的編號。jQuery動態標識符重新排列

例如，如果你有5行的錶行ID應該是1 - 5

但因爲我有哪裏可以加入一排動態表或刪除的問題是當用戶刪除一排在中間的一排。

比方說，你添加3個新行插入表

row-1 
row-2 
row-3

，如果你刪除第二行，你會落得

row-1 
row-3

，如果你添加一個新行（因爲我越來越你會得到這個

row-1 
row-3 
row-4

如何解決這個問題？如何動態重新排列行標識符？

我認爲這必須綁定行刪除，因爲如果在中間沒有刪除行，添加不是問題。

以下是FIDDLE的示例。檢查ID屬性在Web瀏覽器

來源

2017-03-02 lewis4u

你爲什麼要重新安排的ID？ –

因爲我使用該變量來存儲數據在我的數據庫 – lewis4u

是的，所以這樣，不建議重新索引您的記錄，它可能會打破你的分貝，當你有關係模型 –

你需要編寫的代碼從指數1.重新安排行的IDS可以使用GT選擇與.attr()回調函數一起設定新的ID從索引1目標行：

$('#t1 tr:gt(0)').attr('id',function(i,o){ 
    return "r"+ i++ ; 
});

Working Demo

來源

2017-03-02 12:24:47

或只是'我++'，對不起被挑剔 –

這是它，非常感謝你 – lewis4u

@ Mr.Alien ：謝謝。你的建議很有意義。不要對不起:) –

您可以使用以下方法：

var rows = $('#t1 tr') // get the amount of rows 

$.each(rows, function(i, e) { 
    $(e).attr("id", "r" + i);// set the new id 
})

$(document).on('click', '#addRow', function() { 
 
    var row = parseInt($('#t1 tr:last-child').attr('id').replace(/[^\d]/g, ''), 10) + 1; 
 
    $('#t1').append('<tr id="r' + row + '"><td><input name="item[]" type="text"/></td><td><input name="quantity[]" type="number"/></td><td><button class="deleteRow">X</button></td></tr>'); 
 

 
    var rows = $('#t1 tr') 
 

 
    $.each(rows, function(i, e) { 
 
    $(e).attr("id", "r" + i); 
 
    }) 
 
}); 
 

 
$(document).on('click', '.deleteRow', function() { 
 
    var row = parseInt($(this).closest('tr').attr('id').replace(/[^\d]/g, ''), 10); 
 

 
    if (row > 1) { 
 
    $('#r' + row).remove(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="t1"> 
 
    <tr> 
 
    <th>Item</th> 
 
    <th>Quantity</th> 
 
    </tr> 
 
    <tr id="r1"> 
 
    <td> 
 
     <input name="item[]" type="text" /> 
 
    </td> 
 
    <td> 
 
     <input name="quantity[]" type="number" /> 
 
    </td> 
 
    <td> 
 
     <button class="deleteRow">X</button> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<button id="addRow">Add Row</button>

來源

2017-03-02 12:26:33

This works also but Milind Anantwar was first to answer – lewis4u

沒問題，只是樂意幫忙 –

jQuery動態標識符重新排列

回答

相關問題