Olvis Quintana Olvis Quintana - 3 months ago 11
jQuery Question

Average per item in a td class jquery

i want a little help please,

my following table is this:

<table class="tableTest" id="tblOne">
<thead>

<tr><strong><h1>Players</h1></strong></tr>
<tr>
<th>Player name</th>
<th># hits</th>
<th>AVG</th>
</tr>
</thead>
<tbody>

<tr>
<td>Charles Xaviers</td>
<td class="playerClass">10</td>
<td class="test">&nbsp;</td>
</tr>
<tr>
<td>Gon Freecs</td>
<td class="playerClass">17</td>
<td class="test">&nbsp;</td>
</tr>

<tr>
<td>J.K Rolling</td>
<td class="playerClass">21</td>
<td class="test">&nbsp;</td>
</tr>

<tr>
<td><b>Total</b></td>
<td class="totalCountPlayer">&nbsp;</td>
<td>100%</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><b>AVG </b></td>
<td class="avgPlayers">&nbsp;</td>
</tr>

</tbody>




And this is my jquery code to calculate

$(document).ready(function() {


var classSum = 'playerClass'; var classTotal = 'totalCountPlayer'; var ClassAvg = 'avgPlayers';
calculate(classSum, classTotal, ClassAvg);

function calculate(classSum, classTotal, ClassAvg) {
var sumatoria = $('.' + classSum);
var total = 0;
var count = -1;
$.each(sumatoria, function(i, suma){
var pc=$(this).text();
if (pc!= 'NA'){
total = total + parseInt(pc,10);
count++;
avg(pc);
}});


$('.' + classTotal).text(total);
$('.' + ClassAvg).text((total / count).toFixed(3));

function avg(pc){
var avg = 0;

avg = (pc/total);
$( "td.test" ).text(avg);
}
}

});


Im trying to calculate the avg per item , but always take the last avg calculated how can i do to write the calcule in the .test class , please help me

Should look like this:

<table class="tableTest" id="tblOne">




<tr><strong><h1>Players</h1></strong></tr>
<tr>
<th>Player name</th>
<th># hits</th>
<th>AVG</th>
</tr>





<tr>
<td>Charles Xaviers</td>
<td class="playerClass">10</td>
<td class="test">0.20%</td>
</tr>
<tr>
<td>Gon Freecs</td>
<td class="playerClass">17</td>
<td class="test">0.35%</td>
</tr>

<tr>
<td>J.K Rolling</td>
<td class="playerClass">21</td>
<td class="test">0.43%</td>
</tr>

<tr>
<td><b>Total</b></td>
<td class="totalCountPlayer">&nbsp;</td>
<td>100%</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><b>AVG </b></td>
<td class="avgPlayers">&nbsp;</td>
</tr>




enter link description here

MJH MJH
Answer

Your two main issues were these:

  1. You wanted to populate one td at a time, but $( "td.test" ) targets every td with a test class
  2. total was not being calculated correctly (which you would have seen once #1 was resolved)

Try the following, which is a bit "quick and dirty":

$(document).ready(function() {

    var classSum = 'playerClass'; var classTotal = 'totalCountPlayer'; var ClassAvg   = 'avgPlayers';
    var grandTotal = getGrandTotal();

    calculate(classSum, classTotal, ClassAvg);    

    function calculate(classSum, classTotal, ClassAvg) {      
        var sumatoria = $('.' + classSum);
        var total = 0;
        var count = 0; // formerly: -1
        $.each(sumatoria, function(i, suma){
            var pc=$(this).text();
            if (pc!= 'NA'){
               count++;
               avg(pc, $(this).next());
            }
        });

        $('.' + classTotal).text(grandTotal);
        $('.' + ClassAvg).text((grandTotal / count).toFixed(3));

        function avg(pc, $td){
            var avg = 0;

            avg = (pc/grandTotal);
            $td.text(Math.round(avg * 100, 0) + '%');
        }
    }

    function getGrandTotal() {
        var sumatoria = $('.' + classSum);
        var total = 0;
        $.each(sumatoria, function(i, suma){
            var pc=$(this).text();
            if (pc!= 'NA'){
               total = total + parseInt(pc, 10);
            }
        });
        return total;
    }
});


Output:

Player name         # hits      AVG
-----------         ------      ---
Charles Xaviers     10          21%
Gon Freecs          17          35%
J.K Rolling         21          44%
Total               48          100%
                    AVG         16.000


Note:

  1. Your first percentage (for example) is really 20% (21% when rounded up), not .20%. So, I made that modification, which means your percentages now total 100%, as would be expected.

  2. The correct "AVG" would be 16 (48 / 3), not 24. I made that modification as well, but if for some reason you want to keep 24, just change var count = 0; back to var count = -1;.

Comments