Как изменить расчет при удалении строки из таблицы

Question

Моя проблема в том, что вычисления работают нормально, но при удалении строки вычисления не обновляются в соответствии с тем, что после создания новой строки и после выполнения вычисления обновляются только значения. Пожалуйста, помогите мне исправить эту проблему.

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

Скрипт для автоматического создания следующей строки:

$('.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);
    }
});

Скрипт для удаления строки:

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

Answer 1

Давайте представим, что у вас есть подобный HTML (может быть динамически нарисованный HTML).

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

Кроме того, предположим, что вы изменили подход к обновлению итогового значения, чтобы оно было таким (которое готово внутри документа). Это пример кода, ваш реальный код может отличаться. Все, что вам нужно сделать, это сохранить on("keyup change") (или как вам нравится) внутри 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));
});

Теперь, когда вы каждый раз нажимаете кнопку с классом .remove3, вы правы в отношении удаления строки. В том же блоке вы можете легко обновить сумму, вызвав событие change() элемента, который имеет класс .Qty. (Вот так обновляется итог в первую очередь) См. Ниже,

$('.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!");
    }      
});

Скрипки, https://jsfiddle.net/anjanasilva/dykm6wau/

Надеюсь, это поможет. Ура!

Answer 2

     $(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 delete row:

        $(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!");
            }
        });

Answer 3

Обновить эту строку:

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

Я думаю, что класс '.remove3' неправильно добавлен со списком селекторов.