jquery 删除时动态更改表行 ID

Question

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 应动态交换。有谁知道如何解决这一问题 ：（？

Answer 1

您不需要 id 来从输入元素获取值，我们可以轻松地动态获取每个输入的值，请检查下面的代码。

$('.savebtn').on('click', function(){

   $('.listable .cb').each(function(index, item){

        console.log($(item).find('input[type=number]').val());

   });

});

https://jsfiddle.net/n7dzhwk4/

Answer 2

我认为更明智的选择是交换值，而不是更改 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/

Answer 3

试试这个，实际上这不是解决这个问题的最佳方法，你真的不需要动态更改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());

               

            });

            });