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:

    <table border="0" cellspacing="0" cellpadding="2" width="400" id="mineraltable">
    <thead>

<tr>
<td valign="top" width="154">Ore</td>
<td valign="top" width="53">Price Per Unit</td>
<td valign="top" width="93">Quantity</td>
<td valign="top" width="100">Value</td></tr>
<tr>
        </thead>
<tbody>
<td valign="top" width="154"><strong>Arkonor</strong></td>
<td class="price" id="11" valign="top" width="53">1</td>
<td class="quantity" valign="top" width="93"><input name="12" value="1"></td>
<td class="value" id="13" valign="top" width="100">&nbsp;</td>
    </tr> 
</tbody>
    </table>
<p id="result">Your value is: </p>
<button type="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);
});​