Dynamic table if checkbox is unchecked add back value to the column

Question

I need to add back the pay amount to the outstanding amount if the row of the checkbox is unchecked. Currently what am I facing now is when I unchecked, the outstanding amount keep decreasing and did not add back. My second row did not have pay amount but if I checked it will also keep decreasing the value. Can someone help with my coding?

Initial version

 Name | Outstanding | Pay  | 
Item 1|   20,000    | 0.00 |
Item 2|   10,000    | 0.00 |
Item 3|    3,000    | 0.00 |

My expected result for checked:

 Name | Outstanding |  Pay  |         |
Item 1|   14,000    | 6,000 | checked |
Item 2|    7,000    | 3,000 | checked |
Item 3|    3,000    |  0.00 |         |

My expected result for unchecked:

If unchecked, it will add back the amount to outstanding.

 Name | Outstanding |  Pay  |          |
Item 1|   20,000    | 6,000 | unchecked|
Item 2|    7,000    | 3,000 | checked  |
Item 3|    3,000    |  0.00 |          |

Issue that I faced:

I input 6,000 in first row and checked, the outstanding will become 14,000. Then I checked the second row without input pay amount, the second row outstanding amount will also deduct and deduct again for first row. But it should not deduct again or deduct the amount since the pay amount is zero.
If I keep unchecked and checked, the amount will keep decrease.

 Name | Outstanding |  Pay  |         |
Item 1|    8,000    | 6,000 | checked |
Item 2|   18,000    |  0.00 | checked |
Item 3|    3,000    |  0.00 |         |

$(function() {

  function calcSum(t) {
    var result = 0.00;
    var OutAmt = 0.00;
    var Amt = 0.00;
    $("tbody tr").each(function(i, r) {
      if ($('input[name="chck"]', r).is(":checked")) {
        result += parseFloat($(".payAmt", r).val());
        OutAmt += parseFloat($(".outstandingAmt", r).text().replace(/,/g, ''))
        Amt = $('.outstandingAmt', r).text((OutAmt - result).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));

      }
    });
    return result;
  }

  function updateSum(tbl) {
    var t = calcSum(tbl);
    $("#txtUnappliedAmt").val(t.toFixed(2));
  }

  updateSum($("#price-list"));

  $("#price-list input").change(function() {
    updateSum($("#price-list"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="price-list">
  <thead>
    <tr>
      <th>Name</th>
      <th>Outstanding</th>
      <th>Pay</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="item name">Item 1</td>
      <td class="outstandingAmt">20,000.00</td>
      <td class="item price"><input class="payAmt" type="text" value="0.00"></td>

      <td><input type="checkbox" name="chck"></td>
    </tr>
    <tr>
      <td class="item name">Item 2</td>
      <td class="outstandingAmt">10,000.00</td>
      <td class="item price"><input class="payAmt" type="text" value="0.00"></td>
      <td><input type="checkbox" name="chck"></td>
    </tr>
    <tr>
      <td class="item name">Item 3</td>
      <td class="outstandingAmt">5,000.00</td>
      <td class="item price"><input class="payAmt" type="text" value="0.00"></td>
      <td><input type="checkbox" name="chck"></td>
    </tr>
  </tbody>
</table>
<div>
  <label><b>Unapplied Amount:</b></label>
  <input type="text" id="txtUnappliedAmt" value="0.00" disabled>
</div>

Swati · Accepted Answer · 2021-06-25 09:59:22Z

1

You can do calculation of only rows where checkbox has been checked/unchecked and keep your calcSum function only for getting total from checked checkbox .

Demo Code :

$(function() {

  function calcSum(t) {
    var result = 0.00;
    $("tbody tr").each(function(i, r) {
      if ($('input[name="chck"]', r).is(":checked")) {
        result += parseFloat($(".payAmt", r).val());//just for total
      }
    });
    return result;
  }

  function updateSum(tbl) {
    var t = calcSum(tbl);
    $("#txtUnappliedAmt").val(t.toFixed(2));
  }

  updateSum($("#price-list"));
 //keep this on check of checkbox..
  $("#price-list input:checkbox").change(function() {
    var closest_row = $(this).closest("tr")//closest row..
    var pay_ = parseFloat($(".payAmt", closest_row).val())
    var OutAmt = parseFloat($(".outstandingAmt", closest_row).text().replace(/,/g, ''))
    if ($(this).is(":checked")) {
      $('.outstandingAmt', closest_row).text((OutAmt - pay_).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')); //deduce
    } else {
      $('.outstandingAmt', closest_row).text((OutAmt + pay_).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')); //add
    }
    updateSum($("#price-list"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="price-list">
  <thead>
    <tr>
      <th>Name</th>
      <th>Outstanding</th>
      <th>Pay</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="item name">Item 1</td>
      <td class="outstandingAmt">20,000.00</td>
      <td class="item price"><input class="payAmt" type="text" value="0.00"></td>

      <td><input type="checkbox" name="chck"></td>
    </tr>
    <tr>
      <td class="item name">Item 2</td>
      <td class="outstandingAmt">10,000.00</td>
      <td class="item price"><input class="payAmt" type="text" value="0.00"></td>
      <td><input type="checkbox" name="chck"></td>
    </tr>
    <tr>
      <td class="item name">Item 3</td>
      <td class="outstandingAmt">5,000.00</td>
      <td class="item price"><input class="payAmt" type="text" value="0.00"></td>
      <td><input type="checkbox" name="chck"></td>
    </tr>
  </tbody>
</table>
<div>
  <label><b>Unapplied Amount:</b></label>
  <input type="text" id="txtUnappliedAmt" value="0.00" disabled>
</div>

answered Jun 25, 2021 at 9:59

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Esther123 Over a year ago

Hi Swati, I have two situation that I faced which is the row checked and if I change the payAmount it will also update the outstanding amount and the unapplied amount. Others is if the payAmount have value, it will auto checked and calculate. I able to auto checked but the calculation for outstanding amount calculate wrongly. My latest js fiddle for auto checked

Swati Over a year ago

Hi, how should i test that ie : Can you guide me to see that result ?

Esther123 Over a year ago

Sure. i.postimg.cc/FzrXrx6n/case4.png (My expected result)

Swati Over a year ago

So , the problem is with outstanding amount . This is because you are changing your original price itself . Quick fix will be saving original value in data-attribute and then whenever you check/unchecked use that original value to do your calculation i.e : demo .

Esther123 Over a year ago

So how could I do for update the amount when I have enter 6,000 amount and checked the row, then I change the amount from 6,000 to 3,000 then it will update amount.

|

Nandhini Rathish · Accepted Answer · 2021-06-25 12:33:00Z

$(function() {
  function getPrice(row) {
    var txt = $(".price", row).text().slice(1);
    var p = parseFloat(txt);
    return p;
  }

  function calcSum(t) {
    var result = 0.00;
    $("tbody tr", t).each(function(i, r) {
      if ($("input", r).is(":checked")) {
        result += getPrice(r);
      }
    });
    return result;
  }

  function updateSum(tbl) {
    var t = calcSum(tbl);
    $("tfoot .total.price", tbl).html("$" + t.toFixed(2));
  }

  updateSum($("#price-list"));

  $("#price-list input").change(function() {
    updateSum($("#price-list"));
  });
});

#price-list {
  width: 240px;
}

#price-list thead th {
  width: 33%;
  border-bottom: 1px solid #ccc;
}

#price-list tfoot td {
  border-top: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="price-list">
  <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="item name">Item 1</td>
      <td class="item price">$3.00</td>
      <td><input type="checkbox" checked /></td>
    </tr>
    <tr>
      <td class="item name">Item 2</td>
      <td class="item price">$4.00</td>
      <td><input type="checkbox" checked /></td>
    </tr>
    <tr>
      <td class="item name">Item 3</td>
      <td class="item price">$5.00</td>
      <td><input type="checkbox" checked /></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td class="total price">$0.00</td>
      <td>&nbsp;</td>
    </tr>
  </tfoot>
</table>

Collectives™ on Stack Overflow

Dynamic table if checkbox is unchecked add back value to the column

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related