SO-22047513

by Kelly Hawker

HTML

<table>
    <tbody>
        <tr>
            <th>Product name</th>
            <th>Qty</th>
            <th>Price</th>
            <th align="center"><span id="amount" class="amount">Amount</span> 
            </th>
        </tr>
        <tr>
            <td>Product 1</td>
            <td>
                <select value="" class="qty" name="qty">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </td>
            <td>
                <input type="text" value="11.60" class="price">
            </td>
            <td align="center"><span id="amount" class="amount">0</span> eur</td>
        </tr>
        <tr>
            <td>Product 2</td>
            <td>
                <select value="" class="qty" name="qty">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </td>
            <td>
                <input type="text" value="15.26" class="price">
            </td>
            <td align="center"><span id="amount" class="amount">0</span> eur</td>
        </tr>
        <tr>
            <td colspan="2"></td>
            <td align="right"><span id="total" class="total">TOTAL</span> 
            </td>
        </tr>
    </tbody>
</table>

JavaScript

$(document).ready(function () {
    function calculator() {
        var amt = $('.amount:gt(0)'),
            tot = $('#total');
        amt.text(function () {
            var tr = $(this).closest('tr');
            var qty = tr.find('.qty').val();
            var price = tr.find('.price').val();
            return parseFloat(qty) * parseFloat(price);
        });
        tot.text(function () {
            var sum = 0;
            amt.each(function () {
                sum += parseFloat($(this).text())
            });
            return sum;
        });
    }
    calculator();
    $('.qty,.price').change(calculator);
});