jquery - 计算乘积的总和和总计

Question

我有一组产品，每行都有数量、价格和总和，如下图所示:

我想用jquery自动计算每行的总和以及最后的总数，而不退出页面。

我对 jquery 没有丰富的经验。

我怎样才能做到这一点？

非常感谢。

Answer 1

这是我认为你想做的事情的 fiddle :

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>

---

更新:

这是一个可更新数量的版本: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>