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(); });當(dāng)我單擊按鈕時(shí)，這將動(dòng)態(tài)添加表行或刪除該行。之后，如果用戶刪除第二行，則行 id 2 已被刪除，并且行 id 應(yīng)動(dòng)態(tài)交換。有誰(shuí)知道如何解決這一問(wèn)題 ：（？
3 回答
阿波羅的戰(zhàn)車
TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超6個(gè)贊
您不需要 id 來(lái)從輸入元素獲取值，我們可以輕松地動(dòng)態(tài)獲取每個(gè)輸入的值，請(qǐng)檢查下面的代碼。
$('.savebtn').on('click', function(){
$('.listable .cb').each(function(index, item){
console.log($(item).find('input[type=number]').val());
});
});
https://jsfiddle.net/n7dzhwk4/
慕仙森
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊
我認(rèn)為更明智的選擇是交換值，而不是更改 ID。您可以通過(guò)將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貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊
試試這個(gè)，實(shí)際上這不是解決這個(gè)問(wèn)題的最佳方法，你真的不需要?jiǎng)討B(tài)更改id，但我希望這會(huì)對(duì)你有所幫助
$('.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 關(guān)注
- 145 瀏覽
添加回答
舉報(bào)
0/150
提交
取消