How To Change Calculation When The Row Is Removed From A Table

My problem is the calculations are working fine but when the row is removed the calculations are not updating according to that after creating a new row and after performing calcul

Solution 1:

Let's imagine you have an HTML like (could be a dynamically drawn HTML).

<tr><td><inputclass="Qty"type="text"value="2"/></td><td><inputclass="Rate"type="text"value="200"/></td><td><inputclass="Value"type="text"/></td><td><buttontype="button"class="remove3">X</button></td></tr>

Also, let's say you have changed the approach to update the total to be like this, (which is inside document ready). This is a sample code, your actual code may vary. All you need to do is keep the triggering on("keyup change") (or as however you like) inside the document.ready().

$('.Qty').on("keyup change",function(){         
    var $row = $(this).closest("tr");
    var price = 0;
    var total = 0;

    $('.tb3 tr').each(function() {
         var qty = $(this).find('.Qty').val();
         var rate = $(this).find('.Rate').val();             
         var price =  qty * rate;             
         $(this).find('.Value').val(price);
         total += parseFloat(price);
    });
     $('#TieTotal').val(total.toFixed(2));
});

Now, when each time you press the button which has class .remove3 you are correct in terms of removing the row. In the same block you can easilty update the total by triggering the change() event of element which has the class .Qty. (That's how the total is updated in the first place) See below,

$('.remove3').click(function ()  {
    var trIndex = $(this).closest("tr").index();
  if (trIndex > 0) {
      $(this).closest("tr").remove();
      $('.Qty').trigger('change');
  } else {
      alert("Sorry!! Can't remove first row!");
    }      
});

Fiddle, https://jsfiddle.net/anjanasilva/dykm6wau/

I hope this helps. Cheers!

Solution 2:

Update this line:

$(document).on('change', 'tr td:nth-child(6), tr td:nth-child(5), tr td:nth-child(4), .remove3'function(){  

i think class '.remove3' not added properly with selectors list.

Solution 3:

     $(document).on('change', 'tr td:nth-child(6), tr td:nth-child(5), tr td:nth-child(4)', .
            'remove3'function() {
                var total = 0;
                var sqty = 0;
                var tr = $(this).parent();
                var qty = tr.find('td:nth-child(4)').find('input').val();
                var rate = tr.find('td:nth-child(5)').find('input').val();
                var amount = qty * rate;
                tr.find('td:nth-child(6)').find('input').val(amount);

                var tbody = tr.parent();

                $(tbody).find('tr').each(function() {
                    total += Number($(this).find('td:nth-child(6)').find('input').val());
                    sqty += Number($(this).find('td:nth-child(4)').find('input').val());
                });

                $('#TieTotal').val(total);
                $('#SQty').val(sqty);
                $('#Grandtot').val(total);
            })

    Script to create a next row automatically:

        $('.tb3').on('keydown', 'input', function(e) {
            var keyCode = e.keyCode;
            if (keyCode !== 9) return;
            var $this = $(this),
                $lastTr = $('tr:last', $('.tb3')),
                $lastTd = $('td:last', $lastTr);
            if (($(e.target).closest('td')).is($lastTd)) {
                var cloned = $lastTr.clone();
                cloned.find('input').val('');

                $lastTr.after(cloned);
            }
        });

    Script to deleterow:

        $(document).on('click', '.remove3', function() {
            var trIndex = $(this).closest("tr").index();
            if (trIndex > 0) {
                $(this).closest("tr").remove();
 $('.Qty').trigger('change');
            } else {
                alert("Sorry!! Can't remove first row!");
            }
        });