html <table class="table table-bordered listable"> <thead> <tr class="text-center"> <th>name</th> <th>amount</th> <th style="text-align:center"> <a href="#" class="btn btn-info addRow">+</a> </th> </tr> </thead> <tbody class="text-center"> <tr class="cb" id="row_0"> <td width="20%"> <select class="form-control select2 firstname v1" id="name1_0" name="name[]" style="width: 100%;"> <option id="1">tan</option><option id="2">lim</option> </select></td> <td width="20%"><input type="number" name="winlose[]" id="amt1_0" class="form-control first"></td> <td width="20%"><a href="#" class="btn btn-danger remove">-</a></td> </tr> </tbody> </table> <button type="button" class="btn btn-primary savebtn">Save</button>jQuery $('.addRow').on('click', function(){ addRow(); });function addRow() { var rowCount = $('.listable tr').length -1; var tr = '<tr class="cb" id="row_'+rowCount+'"><td>'; tr += '<select class="form-control select2" id="name1_'+rowCount+' first" name="name[]">'; tr += '<option id="1">tan</option><option id="2">lim</option></select></td>'; tr += '<td><input type="number" name="winlose[]" id="amt1_'+rowCount+'" class="form-control"></td>'; tr += '<td style="text-align:center"><a href="#" class="btn btn-danger remove">-</a>'; tr += '</td></tr>'; i++; $('tbody').append(tr); } $('tbody').on('click', '.remove', function(){ $(this).parent().parent().remove(); });當我單擊按鈕時，這將動態添加表行或刪除該行。之后，如果用戶刪除第二行，則行 id 2 已被刪除，并且行 id 應動態交換。有誰知道如何解決這一問題 ：（？
3 回答
阿波羅的戰車
TA貢獻1862條經驗 獲得超6個贊
您不需要 id 來從輸入元素獲取值，我們可以輕松地動態獲取每個輸入的值，請檢查下面的代碼。
$('.savebtn').on('click', function(){
$('.listable .cb').each(function(index, item){
console.log($(item).find('input[type=number]').val());
});
});
https://jsfiddle.net/n7dzhwk4/
慕仙森
TA貢獻1827條經驗 獲得超8個贊
我認為更明智的選擇是交換值，而不是更改 ID。您可以通過將onclick刪除操作更改為：
$('tbody').on('click', '.remove', function(){
elements = $(".cb");
current = parseInt($(this).id);
for (let itr = current; itr < elements.length - 1; itr++) {
elements[itr].value = elements[itr + 1].value;
}
elements[elements.length - 1].remove();
i--;
});
這是代碼： https: //jsfiddle.net/ckpLqs4g/
嚕嚕噠
TA貢獻1784條經驗 獲得超7個贊
試試這個，實際上這不是解決這個問題的最佳方法，你真的不需要動態更改id，但我希望這會對你有所幫助
$('.addRow').on('click', function(){
addRow();
});
function addRow()
{
var rowCount = $('.listable tr').length -1;
var tr = '<tr class="cb" id="row_'+rowCount+'"><td>';
tr += '<select class="form-control select2" id="name1_'+rowCount+' first" name="name[]">';
tr += '<option id="1">tan</option><option id="2">lim</option></select></td>';
tr += '<td><input type="number" name="winlose[]" id="amt1_'+rowCount+'" class="form-control"></td>';
tr += '<td style="text-align:center"><a href="#" class="btn btn-danger remove">-</a>';
tr += '</td></tr>';
i++;
let elementCount = 0
$('tbody').append(tr);
$('tbody').children('tr').each(function () {
this.attr('id',`row_${elementCount}`);
elementCount++;
});
}
$('tbody').on('click', '.remove', function(){
$(this).parent().parent().remove();
});
$('.savebtn').on('click', function(){
$('.listable .cb').each(function(index, item){
console.log($('#amt1_'+index).val());
});
});
- 3 回答
- 0 關注
- 147 瀏覽
添加回答
舉報
0/150
提交
取消