Q_27956376 - Array Totals

by ChrisStanyon

HTML

<table id="cart">
    <tr><td>Product 1</td><td>1.00</td><td><input data-price="1.00" name="product[1]" type="text" /></td></tr>
    <tr><td>Product 2</td><td>2.00</td><td><input data-price="2.00" name="product[2]" type="text" /></td></tr>
    <tr><td>Product 3</td><td>1.50</td><td><input data-price="1.50" name="product[3]" type="text" /></td></tr>
    <tr><td>Product 4</td><td>3.00</td><td><input data-price="3.00" name="product[4]" type="text" /></td></tr>
    <tr><td>Total</td><td></td><td id="total"></td></tr>
</table>

CSS

td { padding: 5px; }
#total { border: 1px solid green;  }

JavaScript

$('#cart input').change(function() {
    var total = 0;
    $('#cart input').each(function() {
        qty = $(this).val();
        price = $(this).data('price');
        total += qty * price
    });
    
    $('#total').text(total.toFixed(2));
})