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(){&nbsp; &nbsp;$('.listable .cb').each(function(index, item){&nbsp; &nbsp; &nbsp; &nbsp; console.log($(item).find('input[type=number]').val());&nbsp; &nbsp;});});https://jsfiddle.net/n7dzhwk4/

Answer 2

我认为更明智的选择是交换值，而不是更改 ID。您可以通过将onclick删除操作更改为：&nbsp; &nbsp; &nbsp; &nbsp; $('tbody').on('click', '.remove', function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elements = $(".cb");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; current = parseInt($(this).id);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (let itr = current; itr < elements.length - 1; itr++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elements[itr].value = elements[itr + 1].value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elements[elements.length - 1].remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i--;&nbsp; &nbsp; &nbsp; &nbsp; });这是代码： https: //jsfiddle.net/ckpLqs4g/

Answer 3

试试这个，实际上这不是解决这个问题的最佳方法，你真的不需要动态更改id，但我希望这会对你有所帮助$('.addRow').on('click', function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; addRow();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; });function addRow()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var rowCount = $('.listable tr').length -1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var tr&nbsp; = '<tr class="cb" id="row_'+rowCount+'"><td>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr&nbsp; += '<select class="form-control select2" id="name1_'+rowCount+' first" name="name[]">';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr&nbsp; += '<option id="1">tan</option><option id="2">lim</option></select></td>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr&nbsp; += '<td><input type="number" name="winlose[]" id="amt1_'+rowCount+'" class="form-control"></td>';&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr&nbsp; += '<td style="text-align:center"><a href="#" class="btn btn-danger remove">-</a>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr&nbsp; += '</td></tr>';&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; i++;let elementCount = 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('tbody').append(tr);$('tbody').children('tr').each(function () {&nbsp; &nbsp; this.attr('id',`row_${elementCount}`);&nbsp; elementCount++;});&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; $('tbody').on('click', '.remove', function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).parent().parent().remove();&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $('.savebtn').on('click', function(){&nbsp; &nbsp; &nbsp; &nbsp; $('.listable .cb').each(function(index, item){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log($('#amt1_'+index).val());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });