Calculating data in tables using Javascript / JQuery

Question

So, I'm trying to do some calculations inside an HTML table using Javascript / JQuery. There are 7 columns in one table, and each column must perform their calculations based on the values ​​found in the cells in these columns.

I managed to do this job for one, but as soon as I try to code it, it works for every column that I'm stuck in and I don’t know where to start. Now he just continues to add all the values ​​from each cell with this class name and puts it in all the corresponding cells.

Any help / suggestions are appreciated.

Created a violin with him, if I left any information, please tell me

https://fiddle.jshell.net/gu8feydq/

var aankoopprijs = $(".calc-aankoop").text(); var ob = $(".calc-ob").text(); var add = parseFloat(aankoopprijs) - parseFloat(ob); $(".calc-marktprijs").html(add); //Calculate the Groothandelprijs var marktprijs = $(".calc-marktprijs").text(); var kruissubsidie = $(".calc-kruissubsidie").text(); var add2 = parseFloat(marktprijs) - parseFloat(kruissubsidie); $(".calc-groothandelsprijs").html(add2); //Calculate the Eindgebruikerstarief var groothandelsprijs = $(".calc-groothandelsprijs").text(); var ob2 = $(".calc-ob2").text(); var add3 = parseFloat(groothandelsprijs) - parseFloat(ob2); $(".calc-eindgebruik").html(add3); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table border="1" class="table-tariefstructuur" id="testtable"> <tbody> <tr> <td class="producten">Producten</td> <td style="text-align:center">Mogas</td> <td style="text-align:center">Gasolie</td> <td style="text-align:center">LPG 100</td> <td style="text-align:center">LPG 20</td> <td style="text-align:center">Gasolie</td> <td style="text-align:center">Diesel</td> <td style="text-align:center">Marine fuel oil</td> </tr> <tr id="aankoopprijs"> <td class="producten">1 Aankoopprijs</td> <td class="calc-aankoop" style="text-align:center">800</td> <td class="calc-aankoop" style="text-align:center">&nbsp;</td> <td class="calc-aankoop" style="text-align:center">500</td> <td class="calc-aankoop" style="text-align:center">&nbsp;</td> <td class="calc-aankoop" style="text-align:center">&nbsp;</td> <td class="calc-aankoop" style="text-align:center">&nbsp;</td> <td class="calc-aankoop" style="text-align:center">&nbsp;</td> </tr> <tr id="ob"> <td class="producten">5 OB 6%</td> <td class="calc-ob" style="text-align:center">50</td> <td class="calc-ob" style="text-align:center">&nbsp;</td> <td class="calc-ob" style="text-align:center">25</td> <td class="calc-ob" style="text-align:center">&nbsp;</td> <td class="calc-ob" style="text-align:center">&nbsp;</td> <td class="calc-ob" style="text-align:center">&nbsp;</td> <td class="calc-ob" style="text-align:center">&nbsp;</td> </tr> <tr id="marktprijs"> <td class="producten">6 Marktprijs = som 1-5</td> <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> </tr> <tr id="kruissubsidie"> <td class="producten">8 Kruissubsidie</td> <td class="calc-kruissubsidie" style="text-align:center">4</td> <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> </tr> <tr id="groothandelsprijs"> <td class="producten">9 Groothandelsprijs = som 6-8</td> <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> </tr> <tr id="ob2"> <td class="producten">11 OB 6%</td> <td class="calc-ob2" style="text-align:center">50</td> <td class="calc-ob2" style="text-align:center">&nbsp;</td> <td class="calc-ob2" style="text-align:center">&nbsp;</td> <td class="calc-ob2" style="text-align:center">&nbsp;</td> <td class="calc-ob2" style="text-align:center">&nbsp;</td> <td class="calc-ob2" style="text-align:center">&nbsp;</td> <td class="calc-ob2" style="text-align:center">&nbsp;</td> </tr> <tr id="eindgebruikgerstarief"> <td class="producten">12 Eindgebruikerstarief = som 9-11</td> <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> </tr> </tbody> </table> 

Answer 1

You need to .each() over the elements with .each() , and then perform the calculations using the appropriate elements to process each column.

 $(".calc-aankoop").each(function(i) { var aankoopprijs = $(this).text(); var ob = $(".calc-ob").eq(i).text(); var add = parseFloat(aankoopprijs) - parseFloat(ob); $(".calc-marktprijs").eq(i).html(add); //Calculate the Groothandelprijs var marktprijs = $(".calc-marktprijs").eq(i).text(); var kruissubsidie = $(".calc-kruissubsidie").eq(i).text(); var add2 = parseFloat(marktprijs) - parseFloat(kruissubsidie); $(".calc-groothandelsprijs").eq(i).html(add2); //Calculate the Eindgebruikerstarief var groothandelsprijs = $(".calc-groothandelsprijs").eq(i).text(); var ob2 = $(".calc-ob2").eq(i).text(); var add3 = parseFloat(groothandelsprijs) - parseFloat(ob2); $(".calc-eindgebruik").eq(i).html(add3); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table border="1" class="table-tariefstructuur" id="testtable"> <tbody> <tr> <td class="producten">Producten</td> <td style="text-align:center">Mogas</td> <td style="text-align:center">Gasolie</td> <td style="text-align:center">LPG 100</td> <td style="text-align:center">LPG 20</td> <td style="text-align:center">Gasolie</td> <td style="text-align:center">Diesel</td> <td style="text-align:center">Marine fuel oil</td> </tr> <tr id="aankoopprijs"> <td class="producten">1 Aankoopprijs</td> <td class="calc-aankoop" style="text-align:center">800</td> <td class="calc-aankoop" style="text-align:center">&nbsp;</td> <td class="calc-aankoop" style="text-align:center">500</td> <td class="calc-aankoop" style="text-align:center">&nbsp;</td> <td class="calc-aankoop" style="text-align:center">&nbsp;</td> <td class="calc-aankoop" style="text-align:center">&nbsp;</td> <td class="calc-aankoop" style="text-align:center">&nbsp;</td> </tr> <tr id="ob"> <td class="producten">5 OB 6%</td> <td class="calc-ob" style="text-align:center">50</td> <td class="calc-ob" style="text-align:center">&nbsp;</td> <td class="calc-ob" style="text-align:center">25</td> <td class="calc-ob" style="text-align:center">&nbsp;</td> <td class="calc-ob" style="text-align:center">&nbsp;</td> <td class="calc-ob" style="text-align:center">&nbsp;</td> <td class="calc-ob" style="text-align:center">&nbsp;</td> </tr> <tr id="marktprijs"> <td class="producten">6 Marktprijs = som 1-5</td> <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> <td class="calc-marktprijs" style="text-align:center">&nbsp;</td> </tr> <tr id="kruissubsidie"> <td class="producten">8 Kruissubsidie</td> <td class="calc-kruissubsidie" style="text-align:center">4</td> <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> <td class="calc-kruissubsidie" style="text-align:center">&nbsp;</td> </tr> <tr id="groothandelsprijs"> <td class="producten">9 Groothandelsprijs = som 6-8</td> <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> <td class="calc-groothandelsprijs" style="text-align:center">&nbsp;</td> </tr> <tr id="ob2"> <td class="producten">11 OB 6%</td> <td class="calc-ob2" style="text-align:center">50</td> <td class="calc-ob2" style="text-align:center">&nbsp;</td> <td class="calc-ob2" style="text-align:center">&nbsp;</td> <td class="calc-ob2" style="text-align:center">&nbsp;</td> <td class="calc-ob2" style="text-align:center">&nbsp;</td> <td class="calc-ob2" style="text-align:center">&nbsp;</td> <td class="calc-ob2" style="text-align:center">&nbsp;</td> </tr> <tr id="eindgebruikgerstarief"> <td class="producten">12 Eindgebruikerstarief = som 9-11</td> <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> <td class="calc-eindgebruik" style="text-align:center">&nbsp;</td> </tr> </tbody> </table> 

Answer 2

Taking the first bit as an example:

 var aankoopprijs = $(".calc-aankoop").text(); var ob = $(".calc-ob").text(); var add = parseFloat(aankoopprijs) - parseFloat(ob); $(".calc-marktprijs").html(add); 

Doing something like $ (". Calc-aankoop"). text (); will give you the concatenated text of each calc-aankoop cell, which is not what you want; You want the text in the text in the first "marktprijs" cell to contain the sum of the first aankoop value and the first ob value.

What about:

 $(".calc-marktprijs").each(function(i,marktprijs){ var aankoopprijs = $(".calc-aankoop").eq(i).text(); var ob = $(".calc-ob").eq(i).text(); var add = parseFloat(aankoopprijs) - parseFloat(ob); $(marktprijs).html(add); }); 

This will go through each marktprijs field and fill it with the sum of the corresponding aankoop and ob fields.