Автоматическое вычисление суммы для динамического добавления и удаления строк - jquery

Question

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

Когда я удаляю строки, общая сумма не уменьшается.

Вот скрипка ..

FIDDLE HERE

Вот мой фрагмент ..

$(document).ready(function() {
  var counter = 0;

  $("#add_Row").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

   
    cols += '<td><input type="text" class="form-control" id="cashdeb' + counter + '" data-action="sumDebit" name="debit" placeholder="Debit amount"/></td>';
cols += '<td><button type="button" class="adRow ibtnDel" style="width:70%;">x</button></a></td>';
    newRow.append(cols);

    var defVal = $("select[name=acctname]").find(":selected").val();
    if (defVal) {
      $("select[name=accountName]").find(`option[value=${defVal}]`).hide();
    }
    $("table.order-list").append(newRow);
    setValCashVal('accountName'.concat(counter));
    bindScript();
    counter++;
  });

  // delete function
  $("table.order-list").on("click", ".ibtnDel", function(_event) {
    $(this).closest("tr").remove();
    counter -= 1
  });

});

/* total */

$('body').on('change', '[data-action="sumDebit"]', function() {
    var total = 0;
    $('[data-action="sumDebit"]').each(function(_i, e) {
        var val = parseFloat(e.value);
        if (!isNaN(val)) 
            total += val;
    });
    $('#totaldbt').val(total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">

      <table class="table table-bordered table-hover order-list" id="tab_logic">
        <thead>
          <th class="text-center">
            Debit*
          </th>
        </thead>
        <tbody>
          <input type="button" class="add_Row adRow" id="add_Row" value="Add Row">
        </tbody>
      </table>

    </div>
  </div>
</div>

<!-- total -->


<div class="row">
  <div class="col-6">
    <div class="cashTotal">
      <p class="tableTotal">Total:</p>
    </div>
  </div>
  <div class="col-6">
    <input type="number" class="totaldeb" id="totaldbt" name="total" placeholder="Total Debit Amount" readonly>
  </div>
</div>

Answer 1

change событие не срабатывает при удалении строки. Я бы предложил иметь отдельную функцию, которая оценивает итоговое значение и вызывает его при изменении, а также при удалении строки.

см. Fiddle: https://jsfiddle.net/46fnv9ux/

$("table.order-list").on("click", ".ibtnDel", function(_event) {
  $(this).closest("tr").remove();
  counter -= 1
  evaluateTotal()
});

$('body').on('change', '[data-action="sumDebit"]', function() {
  evaluateTotal();
});


function evaluateTotal() {
  var total = 0;
  $('[data-action="sumDebit"]').each(function(_i, e) {
    var val = parseFloat(e.value);
    if (!isNaN(val))
      total += val;
  });
  $('#totaldbt').val(total);
}

Answer 2

Я переместил вычисление в функцию calcTotal и добавил событие для кнопки удаления, чтобы пересчитать итог при удалении любой строки:

$(document).ready(function() {
  var counter = 0;

  $("#add_Row").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";


    cols += '<td><input type="text" class="form-control" id="cashdeb' + counter + '" data-action="sumDebit" name="debit" placeholder="Debit amount"/></td>';
    cols += '<td><button type="button" class="adRow ibtnDel" style="width:70%;">x</button></a></td>';
    newRow.append(cols);

    var defVal = $("select[name=acctname]").find(":selected").val();
    if (defVal) {
      $("select[name=accountName]").find(`option[value=${defVal}]`).hide();
    }
    $("table.order-list").append(newRow);
    setValCashVal('accountName'.concat(counter));
    bindScript();
    counter++;
  });

  // delete function
  $("table.order-list").on("click", ".ibtnDel", function(_event) {
    $(this).closest("tr").remove();
    counter -= 1
  });

});

/* total */

$('body').on('change', '[data-action="sumDebit"]', function(){
calculateTotal();
});

$(document).on( 'click', '.ibtnDel', function () {
	calculateTotal();
});

function calculateTotal(){
  var total = 0;
  $('[data-action="sumDebit"]').each(function(_i, e) {
    var val = parseFloat(e.value);
    if (!isNaN(val))
      total += val;
  });
  $('#totaldbt').val(total);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">

      <table class="table table-bordered table-hover order-list" id="tab_logic">
        <thead>
          <th class="text-center">
            Debit*
          </th>
        </thead>
        <tbody>
          <input type="button" class="add_Row adRow" id="add_Row" value="Add Row">
        </tbody>
      </table>

    </div>
  </div>
</div>

<!-- total -->


<div class="row">
  <div class="col-6">
    <div class="cashTotal">
      <p class="tableTotal">Total:</p>
    </div>
  </div>
  <div class="col-6">
    <input type="number" class="totaldeb" id="totaldbt" name="total" placeholder="Total Debit Amount" readonly>
  </div>
</div>

или вы можете сделать это следующим образом:

$('body').on('change', '[data-action="sumDebit"]', function(){
    calculateTotal();

  $('#tab_logic').on( 'click', '.ibtnDel', function () {
    calculateTotal();
  });  
});

function calculateTotal(){
  var total = 0;
  console.log(total);
  $('[data-action="sumDebit"]').each(function(_i, e) {
    var val = parseFloat(e.value);
    if (!isNaN(val))
      total += val;
  });
  $('#totaldbt').val(total);
}

Answer 3

Событие нажатия кнопки удаления не пересчитывает общее количество.

Ответ @Devis & Bilal добавит все значения, чтобы найти сумму. Вместо этого вы можете просто вычесть значение удаленной строки из общего числа.

Измените функцию удаления, как показано ниже, чтобы вычесть удаленное значение из общего количества.

  // delete function
  $("table.order-list").on("click", ".ibtnDel", function(_event) {
    counter -= 1
    var total = $('#totaldbt').val();
    var delVal = $(this).closest("tr").find('input').val();
    var val = parseFloat(delVal);
    if (!isNaN(val))
      total -= val;
    $('#totaldbt').val(total);
    $(this).closest("tr").remove();
  })

;

Answer 4

просто сделайте то же самое при удалении строки, которую вы сделали при добавлении.

$(document).ready(function() {
  var counter = 0;

  $("#add_Row").on("click", function() {
    var newRow = $("<tr>");
    var cols = "";

   
    cols += '<td><input type="text" class="form-control" id="cashdeb' + counter + '" data-action="sumDebit" name="debit" placeholder="Debit amount"/></td>';
cols += '<td><button type="button" class="adRow ibtnDel" style="width:70%;">x</button></a></td>';
    newRow.append(cols);

    var defVal = $("select[name=acctname]").find(":selected").val();
    if (defVal) {
      $("select[name=accountName]").find(`option[value=${defVal}]`).hide();
    }
    $("table.order-list").append(newRow);
    setValCashVal('accountName'.concat(counter));
    bindScript();
    counter++;
  });

  // delete function
  $("table.order-list").on("click", ".ibtnDel", function(_event) {
    $(this).closest("tr").remove();
    counter -= 1
     var total = 0;
    $('[data-action="sumDebit"]').each(function(_i, e) {
        var val = parseFloat(e.value);
        if (!isNaN(val)) 
            total += val;
    });
    $('#totaldbt').val(total);
  });

});

/* total */

$('body').on('change', '[data-action="sumDebit"]', function() {
    var total = 0;
    $('[data-action="sumDebit"]').each(function(_i, e) {
        var val = parseFloat(e.value);
        if (!isNaN(val)) 
            total += val;
    });
    $('#totaldbt').val(total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">

      <table class="table table-bordered table-hover order-list" id="tab_logic">
        <thead>
          <th class="text-center">
            Debit*
          </th>
        </thead>
        <tbody>
          <input type="button" class="add_Row adRow" id="add_Row" value="Add Row">
        </tbody>
      </table>

    </div>
  </div>
</div>

<!-- total -->


<div class="row">
  <div class="col-6">
    <div class="cashTotal">
      <p class="tableTotal">Total:</p>
    </div>
  </div>
  <div class="col-6">
    <input type="number" class="totaldeb" id="totaldbt" name="total" placeholder="Total Debit Amount" readonly>
  </div>
</div>