Question

I’m trying to work out the Javascript required to calculate an average for a table row on the fly, then also update the total for all the same type of rows. Here’s a simplified jsfiddle that illustrates this:

http://jsfiddle.net/fmdataweb/5ZtQZ/3/

The user can select any type of fruit from the drop down list then enter the number and weeks. For example if they select “Apple” and enter 5 as the number and 26 for the weeks I would like to automatically then calculate the average, which in this case would be 2.5 (number * weeks / 52).

I would also then like to automatically total the averages for the same type of fruit selection. Currently it is totalling the Number column – I need to change this to the Average column, and have this fire after the average is calculated. So if the user selected Apple in more than one row it would then find all instances of this and total the value in the Average column.

I’ve got some code from another file that will work out the average but I’m having trouble combining the 2 scripts into 1, or knowing if that is the best option or otherwise how to have 2 separate scripts. Here’s some psuedo code I found for calculating the averages:

$("#fruit input").live("keyup", function(){
var id = this.id.match(/\d+/);
var number = ( ($("#number"+id).val() * $("#weeks"+id).val()  )/52 );
var rounded = Math.round( number * 10 ) / 10;
$("#average"+id).val( rounded );

Happy to use ID’s if that makes everything easier. Appreciate if anyone can enlighten me as to how to achieve this or if you can point to any examples that do something similar. I’m new to Javascript.

Answer 1

I’ve try with a different way, but semm to work:

Iterate in tr cells, and calculation of sum of each option selected with .map()

This is the JS:

$('#fruits')
    .on('change', 'select', calc)
    .on('keyup', 'input', calc);

function calc(){

    $('#fruits tr:has(.fruit)').each(function(i,v){

        var $cel = $(v.cells);

        var $fruit = $cel.eq(1).find('option:selected').val();
        var $numb = $cel.eq(2).find('input').val();
        var $weeks = $cel.eq(3).find('input').val();
        var $avg = ($numb * $weeks) / 52;

        $cel.eq(4).find('input').val($avg);

    });   

    var tot = {};

    $('#fruits tr:has(.fruit) option:selected')
                .map(function(i){
                    var el = $(this).val();
                    var qty = parseFloat($('#fruits tr:has(.fruit)').eq(i).find('td:last input').val());
                    if (!tot.hasOwnProperty(el)) {
                        tot[el] = 0;            
                    }
                    tot[el] += qty
                    return tot;
                }).get();

    //console.log(tot);
    $('#sumApple').text(tot.Apple);
    $('#sumBanana').text(tot.Banana);
    $('#sumMango').text(tot.Mango);

}

And THIS is the Fiddle

PS: i’ve not do the numeric control, bu is the same of yours