jquery - Calculate the sum and total of products

I hav开发者_如何学运维e a set of products with Qty, price and Sum in each line like in this picture:

I want to make it with jquery to auto calculate the Sum in each line and the total in the end, without quitting the page.

I don't have a big experience with jquery.

How can I do that ?

Thanks a lot.

---

Here is a fiddle of what i think you want to do:

http://jsfiddle.net/maniator/qEy3L/

JS:

function getTotal(){
    var total = 0;
    $('.price').each(function(){
        total += parseFloat(this.innerHTML)
    });
    $('#total').text(total);
}

getTotal();

HTML:

<table>
    <thead>
        <tr>
            <th>QTY</th>
            <th>PRICE</th>
            <th>SUM</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2</td>
            <td>1.25</td>
            <td class='price'>2.50</td>
        </tr>
        <tr>
            <td>3</td>
            <td>2.10</td>
            <td class='price'>6.30</td>
        </tr>
        <tr>
            <td>5</td>
            <td>10.50</td>
            <td class='price'>52.50</td>
        </tr>
        <tr>
            <td colspan='2'>Total</td>
            <td id='total'></td>
        </tr>
    </tbody>
</table>

---

UPDATE:

Here is a version with an updatable QTY: http://jsfiddle.net/maniator/qEy3L/5/

JS:

function getTotal(){
    var total = 0;
    $('.sum').each(function(){
        total += parseFloat(this.innerHTML)
    });
    $('#total').text(total);
}

getTotal();

$('.qty').keyup(function(){
    var parent = $(this).parents('tr');
    var price = $('.price', parent);
    var sum = $('.sum', parent);
    var value = parseInt(this.value) * parseFloat(price.get(0).innerHTML||0);
    sum.text(value);
    getTotal();
})

HTML:

<table>
    <thead>
        <tr>
            <th>QTY</th>
            <th>PRICE</th>
            <th>SUM</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input class='qty' size='1'/></td>
            <td class='price'>1.25</td>
            <td class='sum'>0</td>
        </tr>
        <tr>
            <td><input class='qty' size='1'/></td>
            <td class='price'>2.10</td>
            <td class='sum'>0</td>
        </tr>
        <tr>
            <td><input class='qty' size='1'/></td>
            <td class='price'>10.50</td>
            <td class='sum'>0</td>
        </tr>
        <tr>
            <td colspan='2'>Total</td>
            <td id='total'></td>
        </tr>
    </tbody>
</table>

---

How about this: http://jsfiddle.net/QmTNZ/

---

Assuming your comman is meant to be a decimal point(from French numbering system) The one below should work with tables aswell and so on.

<ul class="row">
  <li class="qty">2</li>
  <li class="price">2.45</li>
  <li class="sum"></li>
</ul>
<ul class="row">
  <li class="qty">3</li>
  <li class="price">24.5</li>
  <li class="sum"></li>
</ul>
<div id="total"></div>


//jquery
$('.row').each(function(i,n){
   var sum = ( parseFloat($(n).children('.qty')) * parseFloat($(n).children('.price')) );
   $(n).children('.sum').text(sum)
}).delay(1).queue(function(){
   var total = 0;
   $('.sum').each(function(i,n){
      total += parseFloat($(n).text());
   });
   $('#total').text(total);
});

---

I know this is an old one, but I found Neal's answer very helpful and made a spin-off that I think can be helpful in various situations.

This version allows inputs for both quantity and price, and also allows rows to be dynamically added to the table and still function properly. I also added rounding into the mix since I figure that this is most likely a monetary calculation (just remove all instances of .toFixed(2) if not needed).

jQuery:

$(document).ready(function() {
    $("#order-entry").on("keyup", ".form-calc", function() {
        var parent = $(this).closest("tr");
        parent.find(".form-line").val((parent.find(".form-qty").val() * parent.find(".form-cost").val()).toFixed(2));
        var total = 0;
        $(".form-line").each(function(){
            total += parseFloat($(this).val()||0);
        });
        $("#total").text(total.toFixed(2));
    });
});

HTML:

<table id="order-entry">
    <thead>
        <tr>
            <th>Quantity</th>
            <th>Price</th>
            <th>Sum</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input class="form-calc form-qty" value="1"></td>
            <td><input class="form-calc form-cost" value="10.00"></td>
            <td><input class="form-line" value="0" readonly></td>
        </tr>
        <tr>
            <td><input class="form-calc form-qty" value="2"></td>
            <td><input class="form-calc form-cost" value="5.33"></td>
            <td><input class="form-line" value="0" readonly></td>
        </tr>
        <tr>
            <td colspan="2">Total</td>
            <td id="total"></td>
        </tr>
    </tbody>
</table>