CODEWITHSUNDEEP
javascriptjqueryhtml
Ajay Krishna Dutta
Ajay Krishna Dutta

Reputation: 129

Calculate total value using jquery

I have a table like below :

 <table>
    <th>Sl No</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Discount %</th>
    <th>Total Price</th>
    <tr>
    <td>1</td>
    <td><input class="expensess" ></input></td>
    <td><input class="expensess" ></input></td>
    <td><input class="expensess" ></input></td>
    <td><input class="expensess_sum"></input></td>
    </tr>
    <tr>
    <td>2</td>
    <td><input class="expensess" ></input></td>
    <td><input class="expensess" ></input></td>
    <td><input class="expensess" ></input></td>
    <td><input class="expensess_sum"></input></td>
    </tr>
    </table>

Grand Total = <input id="grand_total">

I am trying to display the Total Price of each row using jquery keyup function. and also want to display the grand total price of the each row. the formula of finding the Total Price is given below :

discount_value = Price*(discount_percent/100)
discount_price = Price-discount_value
total_price = discount_price * quantity

How can I do this please help

i am trying simply just summing all value like this :

<script type="text/javascript">

 $(document).ready(function(){
    $(".expensess").each(function() {

        $(document).on('keyup', '.expensess', function() {
            sum($(this).parents("tr"));
      });
    });
});
function sum(parent){
    var sum = 0;
    $(parent).find(".expensess").each(function(){
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    $(parent).find(".expensess_sum").val(sum.toFixed(2));
}
</script>

But m confused how to implement the above formula for calculate the total price.

Upvotes: 1

Views: 5336

Answers (2)

Ratim Ghimire
Ratim Ghimire

Reputation: 11

Did it by using simple java script Code!

            var sumExpenses = 0;
            var tdBudget = document.getElementById('tableBudget').getElementsByTagName('td');

            for (var i = 0; i < tdBudget.length; i++) {

              if (tdBudget[i].className == "spanexpense") {
                sumExpenses += isNaN(tdBudget[i].innerHTML) ? 0 : parseInt(tdBudget[i].innerHTML);
              }
            }
            document.getElementById('sumExpenses').innerHTML = sumExpenses;


      
<table class="table table-bordered">
        <thead>
          <tr>
            <td class="label-title">Value</td>
            <td class="label-title">Value</td>
            <td class="label-title">Value</td>
          </tr>
        </thead>
        <tbody id="tableBudget">

          <tr>
            <td class="spanexpense">
             12
            </td>
            <td class="spanexpense">
              23
            </td>
            <td class="spanexpense">
              23
            </td>
          </tr>

        </tbody>
        <tfoot>
          <tr>
            <td>Sum</td>
            <td id="sumExpenses"></td>
          </tr>
        </tfoot>
      </table>

Fiddle https://jsfiddle.net/ey2gLp7t/

Upvotes: 1

Ramin Bateni
Ramin Bateni

Reputation: 17415

enter image description here 

$('input.qty,input.price,input.discount').on('change keyup',function(){
  var $tr = $(this).closest('tr'),
      $qty = $tr.find('input.qty')      ,
      $price= $tr.find('input.price'),
      $discount= $tr.find('input.discount'),
      $total= $tr.find('input.expensess_sum'),
      $grand_total=$('#grand_total');
      
      $total.val($qty.val()*($price.val()-($price.val()*($discount.val()/100))));
      
      var grandTotal=0;
      $('table').find('input.expensess_sum').each(function(){
          if(!isNaN($(this).val()))
            {grandTotal += parseInt($(this).val()); 
            }
      });
      if(isNaN(grandTotal))
         grandTotal =0;
      $grand_total.val(grandTotal)
})
input{
   width:80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <table>
    <tbody><tr>
      <th>Sl No</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Discount %</th>
      <th>Total Price</th>
    </tr>
    <tr>
      <td>1</td>
      <td><input class="expensess qty"></td>
      <td><input class="expensess price"></td>
      <td><input class="expensess discount"></td>
      <td><input class="expensess_sum" disabled=""></td>
    </tr>
    <tr>
      <td>2</td>
      <td><input class="expensess qty"></td>
      <td><input class="expensess price"></td>
      <td><input class="expensess discount"></td>
      <td><input class="expensess_sum" disabled=""></td>
    </tr>
    </tbody></table>

Grand Total = <input id="grand_total" disabled="">
  
</body>

Upvotes: 4

Related Questions