使用jquery添加/删除后的动态行编号

Question

我正在尝试使用 jquery 添加/删除后实现动态行编号设置。下面是我的 php 代码，我可以实现添加行，但是在删除时，重新索引部分折叠了

echo "<input type='button' value='Add Task' id='addRow' name='addRow' />";
// table creation 
echo "<tbody id='dynamic_field'>";
                    echo "<tr>";
                    echo "<td> 1 <input type='hidden' name='task_number[]' value='1'> </td>";
                    echo "<td> <input type='text' name='task_description[]' value=''> </td>";
                    echo "<td> <input type='text' name='task_script_name[]' value=''> </td>";
                    echo "<td> <input type='text' name='dependent[]' value=''> </td>";
                    
                    echo "<td id='type1'><right><select name='type[]'>
                              <option enum='Yes'>PrepWork</option>
                              <option enum='No'>Upgrade</option>
                            </select> </center></td>";                  
                    echo "<td id='passthrough1'><right><select name='task_Passthrough[]'>
                              <option enum='Yes'>Yes</option>
                              <option enum='No'>No</option>
                            </select> </center></td>";
                    echo "<td><button type='button' disabled name='remove' 
                    class='btn btn-danger btn_remove'>X</button></td></tr>";

而 jquery 是：

var i=1; 
    $('#addRow').click(function(){  
         i++;  
         console.log(i); 
         $('#dynamic_field').append
         ('<tr><td id="row_num'+i+'">'+i+'<input type="hidden" name="task_number[]" value='+i+'></td>'+
         '<td><input type="text" name="task_description[]" value=""></td>'+
         '<td> <input type="text" name="task_script_name[]" value=""> </td>'+
         '<td> <input type="text" name="dependent[]" value=""> </td>'+
         '<td id="type1"><right><select name="type[]">'+
         '<option enum="Yes">PrepWork</option><option enum="No">Upgrade</option></select></center></td>'+
         '<td id="passthrough1"><right><select name="task_Passthrough[]">'+
         '<option enum="Yes">Yes</option><option enum="No">No</option></select></center></td>'+
         '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
    });  
    $(document).on('click', '.btn_remove', function(){  
         var button_id = $(this).attr("id");   
         $('#row'+button_id+'').remove();  
         
         $('tbody tr').each(function(j){
            // this is the part i am stuck, Once the delete action perfomed table row should be reindex , so that i can save in database.             
         });
         i--;    
    }); 

当我尝试对其进行编码时，表结构因错误值而崩溃。请帮忙解决这个问题！

注意：有 30+ 个任务，所以需要编号来识别和查看，还需要存储在 db 中

Answer 1

我已经从不需要的代码中删除了 id，对于删除按钮，我使用 $(this).closest("tr").remove() 删除整行。然后，您的第一个 td 需要具有正确的任务编号值，以便您可以简单地使用 $(this).find("td:eq(0)").html(..) 进行更改。

演示代码：

var i = 0;
$('#addRow').click(function() {
  i++;
  $('#dynamic_field').append('<tr><td id="row_num' + i + '">' + i + '<input type="hidden" name="task_number[]" value=' + i + '></td>' +
    '<td><input type="text" name="task_description[]" value=""></td>' +
    '<td> <input type="text" name="task_script_name[]" value=""> </td>' +
    '<td> <input type="text" name="dependent[]" value=""> </td>' +
    '<td><right><select name="type[]">' +
    '<option enum="Yes">PrepWork</option><option enum="No">Upgrade</option></select></center></td>' +
    '<td><right><select name="task_Passthrough[]">' +
    '<option enum="Yes">Yes</option><option enum="No">No</option></select></center></td>' +
    '<td><button type="button" name="remove" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function() {
  $(this).closest("tr").remove(); //use closest here
  $('tbody tr').each(function(index) {
    //change id of first tr
    $(this).find("td:eq(0)").attr("id", "row_num" + (index + 1))
    //change hidden input value 
    $(this).find("td:eq(0)").html((index + 1) + '<input type="hidden" name="task_number[]" value=' + (index + 1) + '>')
  });
  i--;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody id="dynamic_field"></tbody>
</table>
<input type='button' value='Add Task' id='addRow' name='addRow' />