Calculating data in tables with Javascript/Jquery

Question

So I'm trying to do some calculations inside a HTML table with Javascript/Jquery. There are 7 columns in 1 table and each column should do their calculations based on the values that are in the cells in those columns.

I did manage to make this work for one, but once I try coding it so it works for every column I get stuck and I don't know where to start. Right now it just keeps up adding all the values from every cell with that classname and puts it in all the corresponding cells.

Any help/suggestions are highly appreciated.

Created a fiddle with it if I left out 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 O.B. 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 O.B. 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>

The fiddle doesn't load jQuery.

Barmar
– Barmar

2016-01-08 13:32:10 +00:00
Commented Jan 8, 2016 at 13:32 — Barmar
– Barmar, Commented Jan 8, 2016 at 13:32
Thanks for the snippet Barmar.

Stefan Neuenschwander
– Stefan Neuenschwander

2016-01-08 13:34:13 +00:00
Commented Jan 8, 2016 at 13:34 — Stefan Neuenschwander
– Stefan Neuenschwander, Commented Jan 8, 2016 at 13:34

Barmar · Accepted Answer · 2016-01-08 13:38:05Z

You need to loop over the elements with .each(), and then perform the calculations using the corresponding 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 O.B. 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 O.B. 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>

So simple yet so powerful! Thanks so much Barmar, I had no idea where to start here. Cheers!

bishbashbosh · Accepted Answer · 2016-01-08 14:00:04Z

1

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 every '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.

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

That will loop through each marktprijs field and populate it with the sum of the corresponding aankoop and ob fields.

answered Jan 8, 2016 at 14:00

bishbashbosh

3691 silver badge11 bronze badges

1 Comment

Stefan Neuenschwander Over a year ago

Thanks for taking the time to help me, but Barmar's answer is working perfectly already!

Collectives™ on Stack Overflow

Calculating data in tables with Javascript/Jquery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related