Auto Calculate Sum for Dynamically Add and Delete Rows – jQuery

Introduction:

Are you struggling to auto calculate the sum when dynamically adding and deleting rows in your jQuery-powered web application? In this blog post, we will explore a solution to this common challenge. We’ll walk through the steps and provide you with the necessary code to make your application automatically calculate the sum as rows are added or removed. Let’s dive in!

Adding Rows Dynamically:

To begin, let’s focus on dynamically adding rows to your table. By clicking the “Add Row” button, you can create new rows with input fields for entering debit amounts. To implement this functionality, follow the code snippet below:

code





















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

    // Add the new row to the table
    $("table.order-list").append(newRow);

    // Perform any additional actions specific to your application
    // ...

    counter++;
  });

  // ...
});

Calculating the Total:

Now, let’s move on to automatically calculating the sum of the debit amounts. We want the total to update whenever a user changes the value in any of the input fields or deletes a row. The code snippet below demonstrates how to achieve this functionality:

code















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

$("table.order-list").on("click", ".ibtnDel", function(_event) {
  $(this).closest("tr").remove();
  var deletedValue = parseFloat($(this).closest("tr").find('input').val());
  var currentTotal = parseFloat($('#totaldbt').val());
  $('#totaldbt').val(currentTotal - deletedValue);
});

Final Touches:

To complete the implementation, let’s add the HTML structure for your table and the total display:

code




























<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>
          <!-- Existing or initially added rows go here -->
        </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>

Conclusion:

By following the steps outlined above, you can effortlessly auto calculate the sum when dynamically adding and deleting rows in your jQuery-powered application. This functionality enhances the user experience by providing real-time updates to the total debit amount. Feel free to customize the code to fit your specific requirements and take your application to the next level