Simple Payment Calculations

by freedawirl

HTML

<table id="super-product-table" class="data-table grouped-items">
    <colgroup>
        <col>
            <col>
                <col width="1">
    </colgroup>
    <thead>
        <tr>
            <th>Product Color</th>
            <th class="a-right1">S M L</th>
            <th class="a-right2">Units Per Pack</th>
            <th class="a-right3">Packs</th>
            <th class="a-right4">Total Units</th>
            <th class="a-center">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr class="sum">
            <td>Blue</td>
            <td class="a-right1">2 2 2</td>
            <td class="a-right2">2</td>
            <td class="a-right3">
                <input type="text" value="0" name="" class="qty"/>
            </td>
            <td class="a-right3">
                <div class="price-box"> <span id="product-price-7" class="regular-price">
                    <span class="price">$7.50</span> </span>
                </div>
            </td>
            <td class="a-center1"></td>
        </tr>
        <tr class="sum">
            <td>Green</td>
            <td class="a-right1">2 2 2</td>
            <td class="a-right2">2</td>
            <td class="a-right3">
                <input type="text" value="0" name="super_group[13]" class="qty"/>
            </td>
            <td class="a-right3">
                <div class="price-box"> <span id="product-price-13" class="regular-price">
                    <span class="price">$10.00</span> </span>
                </div>
            </td>
            <td class="a-center1"></td>
        </tr>
        <tr>
            <td colspan="2">Total</td>
            <td id="total">230.4</td>
        </tr>
    </tbody>
</table>

CSS

th, td {
     border: 1px solid #000;
     padding: 5px;
 }

JavaScript

function ca() {
    var $overall = 0;

    $("tr.sum").each(function () {

        var $qnt = $(this).find(".qty");
        var $price = $(this).find("td:eq(4)").find('.price');

        console.log($qnt + " | " + $price);
        
        var pri = $price.text();
        pri = pri.replace('$', '');
        var sum = parseFloat(pri) * parseFloat($qnt.val());

        $(this).find("td").eq(5).text('$' + sum);

        $overall += sum;

    });

    $("#total").text('$' + $overall);
}

$(function () {

    ca();
    $('input.qty').bind('change keyup', function () {
        ca();
    });

});