CODEWITHSUNDEEP
htmljquery
Esther123
Esther123

Reputation: 57

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

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:

  1. 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.
  2. 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>

Upvotes: 0

Views: 342

Answers (2)

Nandhini Rathish
Nandhini Rathish

Reputation: 34

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

Upvotes: 0

Swati
Swati

Reputation: 28522

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>

Upvotes: 1

Related Questions