Shopping Cart

by aaronk85

HTML

<table>
    <thead>
        <tr><th>Quantity</th><th>Price &dollar;</th><th>Sum</th></tr>
    </thead>
    <tbody>
        <tr class="sum">
            <td>
            <select data-placeholder="Predict the result">
                <option value=""></option>
                <option onclick="document.myform.player.value='1'" value="">1</option>
                <option onclick="document.myform.player.value='2'" value="">2</option>                
            </select>                        
                <form id="myform" name="myform"><input type="hidden" class="qty" name="player" value=""></form>
            </td>
            <td>2</td>
            <td></td>
        </tr>
        <tr class="sum"><td><input class="qty" type="text" value="3" /></td><td>5</td><td></td></tr>
        <tr class="sum"><td><input class="qty" type="text" value="4" /></td><td>10</td><td></td></tr>
        <tr><td colspan="2">Total</td><td id="total">1</td></tr>
    </tbody>
</table>

<table class="tableClass">
<tbody>
    <tr><td colspan="6">Round 3</td></tr>
    <tr>
        <td class="hometeam">Home</td>
        <td class="versusstring"></td>
        <td class="awayteam">Away</td>
        <td class="score">Result</td>
    </tr>
    <tr>
        <td class="hometeam">Ivanhoe</td>
        <td class="versusstring">vs</td>
        <td class="awayteam">Fitzroy</td>
        <td class="score">
            <select data-placeholder="Predict the result">
                <option value=""></option> 
                <option value="">Ivanhoe by 15</option>
                <option value="">Ivanhoe by 30</option>
                <option value="">Ivanhoe by 60</option>
                <option value="">Ivanhoe by 100</option>
                <option value="">Draw</option> 
                <option value="">Fitzroy by 15</option>
                <option value="">Fitzroy by 30</option>
                <option value="">Fitzroy by 60</option>
                <option value="">Fitzroy by 100</option>        
 ...

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(1);
        console.log($qnt + " | " + $price);
        var sum = parseFloat($price.text()) * parseFloat($qnt.val());
        if(isNaN(sum)) {
            sum = 0;
        }
        $(this).find("td").eq(2).text(Math.round(sum * 100) / 100);
        $overall += sum;
    });

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

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