getting values from a html table via javascript/jquery and doing a calculation

Question

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 then hits a button and the script should multiply the Price and Quantity cell in each row and write it in the respective value cell. Then it should finally add all the Values and then write it after the table.

Seems simple enough but I can't figure it out from the javascript / jquery documentation.

this is my html code:

<form>
<table border="0" cellspacing="0" cellpadding="2" width="400" id="mineraltable">
<tbody>
<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>
<td valign="top" width="154"><strong>Arkonor</strong></td>
<td id="11" valign="top" width="53">1</td>
<td valign="top" width="93"><input name="12"></td>
<td id="13" valign="top" width="100">&nbsp;</td></tr>
//Lots more of these rows... all Price rows have an ID with a 1 at the end, i.e. 21, 31, 41,. ...., 
//all the text inputs have a 2 at the end of the name, and all Values have a 3 at the end.
</tbody></table></form>
<p id="result">Your value is: </p>
<button type="button">Calculate</button>

Please modify your title to something descriptive other than a listing of keywords. — j08691
– j08691, Commented Sep 3, 2012 at 0:24
Someone writes a number in the quantity field -> Where is the quantity field? — David G
– David G, Commented Sep 3, 2012 at 0:28

shenku · Accepted Answer · 2012-09-03 01:02:29Z

2

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);
});

answered Sep 3, 2012 at 1:02

shenku

12.5k14 gold badges67 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Killerpixler Over a year ago

everything is working perfectly except for one thing. "It displays: Your value is: NaN" ... I don't think it adds up all the different value cells, remember there are quite a few of them

shenku Over a year ago

like i said you will need to add in some input validation, at the moment, the values price, and quantity MUST be an integer (0, 1 etc) otherwise it will throw NaN if it can't parse the value to an int.

Killerpixler Over a year ago

they are an int... i have set the standard value in each input to 0, therefore the sum total is 0 (0 is correctly displayed in each Value cell)

shenku Over a year ago

did you put the header row into thead like i had in the example?

Killerpixler Over a year ago

omg I'm so stupid :) didn't catch that. It is working now :) Final icing on the cake would be if you could give me a bit of code to have 1,000 comma separators in the Value and Result fields... as in 1,234,567 instead of 1234567

Collectives™ on Stack Overflow

getting values from a html table via javascript/jquery and doing a calculation

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related