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.

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.

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 27, 2018 at 10:59 Ajay Krishna Dutta asked Jan 27, 2018 at 10:48 Ajay Krishna DuttaAjay Krishna Dutta 12944 silver badges1414 bronze badges 1

• keyup? share your plete js – Pedram Commented Jan 27, 2018 at 10:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

$('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./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>

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/ey2gLp7t/