带有HTML表的jQuery Math

Question

so I have a table that's like the following.

 <table> <tr><th>My Table><th class="total"></th></tr> <tr><td class="title">title 1</td><td class="value">10%</td></tr> <tr><td class="title">title 1</td><td class="value">20%</td></tr> <tr><td class="title">title 1</td><td class="value">30%</td></tr> <tr><td class="title">title 1</td><td class="value">40%</td></tr> </table> 

I'm wanting to calculate the sum of all td's with the "value" class (which should equal 100). I then want to divide the total of "value" (100) by the number or table rows (4) and then display the new toal (25) in the th class "total". I've tried several methods and can't figure this one out. Any help would be deeply appreciated!

Answer 1

You can query the cells containing your values using document.querySelectorAll and summing up each cell, calling parseFloat on each cell's innerHTML, then insert the average into the total cell using querySelectorAll again. No jQuery needed.

 var valueCells = document.querySelectorAll('.value'); var sum = 0; for (var i = 0; i < valueCells.length; ++i) { sum += parseFloat(valueCells[i].innerHTML); } document.querySelectorAll('.total')[0].innerHTML = (sum / valueCells.length).toFixed(2); 

 <table> <tr><th>My Table<th class="total"></th></tr> <tr><td class="title">title 1</td><td class="value">10%</td></tr> <tr><td class="title">title 1</td><td class="value">20%</td></tr> <tr><td class="title">title 1</td><td class="value">30%</td></tr> <tr><td class="title">title 1</td><td class="value">40%</td></tr> </table> 

Answer 2

You can try below code.. Hope it helps

 var total = 0; //loop through all td with class value $("td.value").each(function(index) { //remove the last character from the text and convert to float //then add it to variable total total += parseFloat($(this).text().slice(0,-1)); }); //divide total with (number of rows - 1) //-1 to remove the first row which is the heading total = total / ($("table tr").length - 1); //assign the result to th with class total $("th.total").text(total); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr><th>My Table><th class="total"></th></tr> <tr><td class="title">title 1</td><td class="value">10%</td></tr> <tr><td class="title">title 1</td><td class="value">20%</td></tr> <tr><td class="title">title 1</td><td class="value">30%</td></tr> <tr><td class="title">title 1</td><td class="value">40%</td></tr> </table> 

Answer 3

The sample way, to get desired output using jquery :

you can have Answer with limited to 2 decimal places

Demo here

 var total =0, count =0; //iterate through all tr without using index $('table .value').each(function() { //read inner html, add to a variable total += parseFloat($(this).html().slice(0,-1)); //get total number of '.value' count ++; }); //show avg. output in '.total' th $('table .total').html((total/count).toFixed(2)); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr><th>My Table</th><th class="total"></th></tr> <tr><td class="title">title 1</td><td class="value">10%</td></tr> <tr><td class="title">title 1</td><td class="value">20%</td></tr> <tr><td class="title">title 1</td><td class="value">30%</td></tr> <tr><td class="title">title 1</td><td class="value">40%</td></tr> </table>