Search code examples
phpjquerydynamichtml-tableeach

dynamic row numbering after add/delete using jquery

I am trying to achieve a dynamic row numbering setup after add/delete using jquery. below is my php code i can achieve add row, but while doing delete the reindexing part is collapsed

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>";

And jquery is :

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--;    
    });

While i try to code it the table structure got collapsed with error values. Please help on this!!

enter image description here

Note : there are 30+ tasks so need numbering to identify and view and also need to store in db

Solution

  • I have removed ids from code which where not needed and for remove button i have use $(this).closest("tr").remove() to remove entire row . Then , your first td needs to have correct task number value so you can simply use $(this).find("td:eq(0)").html(..) to change same.

    Demo Code :

    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' />