Getting Values From A Html Table Via Javascript/jquery And Doing A Calculation

Problem: I have a html table with 4 columns (Name, Price, Quantity, Value). The Quantity field has an input tag. Basically someone writes the a number in the quantity field and the

Solution 1:

I have done a basic solution for you on jsfildde here.

Note I cleaned up your html a bit.

And you will have to do additional work to check for invalid inputs etc. but you should get the idea.

Html:

<tableborder="0"cellspacing="0"cellpadding="2"width="400"id="mineraltable"><thead><tr><tdvalign="top"width="154">Ore</td><tdvalign="top"width="53">Price Per Unit</td><tdvalign="top"width="93">Quantity</td><tdvalign="top"width="100">Value</td></tr><tr></thead><tbody><tdvalign="top"width="154"><strong>Arkonor</strong></td><tdclass="price"id="11"valign="top"width="53">1</td><tdclass="quantity"valign="top"width="93"><inputname="12"value="1"></td><tdclass="value"id="13"valign="top"width="100">&nbsp;</td></tr></tbody></table><pid="result">Your value is: </p><buttontype="button">Calculate</button>​

Javascript:

    $('button').click(function() {
    var total = 0;

    $('#mineraltable tbody tr').each(function(index) { 

        var price = parseInt($(this).find('.price').text()); 
        var quantity = parseInt($(this).find('.quantity input').val()); 
        var value = $(this).find('.value');
        var subTotal = price * quantity;

        value.text(subTotal);
        total = total + subTotal;

    });

    $('#result').text('Your value is: '+total);
});​