[英]Change table row ID dynamically when delete in jquery
html 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 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();
});
$('.savebtn').on('click', function(){
$('.listable .cb').each(function(index, item){
console.log($('#amt1_'+index).val());
});
});
https://jsfiddle.net/u3hmfc7x/1/ https://jsfiddle.net/u3hmfc7x/1/
This will dynamically add table rows or delete the row when I click the button.当我单击按钮时,这将动态添加表行或删除行。 After that, if user deleting the second row, then the row id 2 has been deleted and row id should be interchanged dynamically.之后,如果用户删除第二行,则行 id 2 已被删除,行 id 应动态交换。 Does anyone know how to fix this:(?有谁知道如何解决这一问题:(?
For example例如
<tr class="cb" id="row_0"><td>a</td></tr>
<tr class="cb" id="row_1"><td>b</td></tr>
<tr class="cb" id="row_2"><td>c</td></tr>
If user delete the second, the rest will auto sequence back the ID, it will become as below如果用户删除第二个,rest 将自动排序返回 ID,它将变为如下
<tr class="cb" id="row_0"><td>a</td></tr>
<tr class="cb" id="row_1"><td>c</td></tr>
you don't need the id to get values from input elements, we can easily get value of each input dynamically, check below code.您不需要 id 从输入元素中获取值,我们可以轻松地动态获取每个输入的值,检查下面的代码。
$('.savebtn').on('click', function(){
$('.listable .cb').each(function(index, item){
console.log($(item).find('input[type=number]').val());
});
});
https://jsfiddle.net/n7dzhwk4/ https://jsfiddle.net/n7dzhwk4/
I think a wiser option, instead of changing the ID, would be to swap the values.我认为一个更明智的选择是交换值,而不是更改 ID。 You can do that by changing your onclick
for delete operation to:您可以通过将用于删除操作的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--;
});
Here's the code for that: https://jsfiddle.net/ckpLqs4g/这是代码: https://jsfiddle.net/ckpLqs4g/
try this, actually this is not the best method to solve this, you really dont need to change the id dynamically but i hope this will help you试试这个,实际上这不是解决这个问题的最佳方法,你真的不需要动态更改 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());
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.