How might I add and calculate a "total" column using JavaScript?

Question

Some time ago, people here helped me very well with code. Now I'm tasked with adding a small function:

I really like to count the winning numbers which are defined in picks.

Can somebody explain/edit the code for adding a extra column behind the last column with the total of green/winning numbers?

Here is the website: http://www.coldcharlie.nl/lotto/

And here is the code:

HTML

<script type="text/javascript" src="../lotto/lotto.js"></script>

<div id="players"></div>
<div id="draws"></div>

JavaScript

(function() {

 var players = {
    Joop   : ["6","8","16","18","26","28","32","36","38","41"],
    Marijke: ["7","10","14","18","24","29","30","34","39","40"],
    Michel : ["4","5","11","16","21","27","33","36","42","44"],
    Mario  : ["6","9","18","25","32","35","39","40","43","45"],
    Diana  : ["2","6","8","17","22","23","33","36","42","45"],
    Agnes  : ["3","5","10","15","26","29","32","37","41","44"],
    Chris  : ["5","7","8","9","11","12","16","28","30","32"],
    Jeannette: ["1","2","4","7","8","11","13","28","30","38"],
    Wieger: ["1","2","3","7","10","13","14","22","23","27"],
    Anita: ["6","13","15","17","21","26","32","33","43","45"],
    Thea: ["1","3","5","7","10","17","19","20","22","38"],
    Danny: ["3","7","11","15","22","28","32","37","40","43"],
    Cindy: ["2","4","16","18","21","24","33","38","41","44"],
    Hanneke: ["1","3","4","12","18","21","25","30","36","40"],
    Willem: ["3","9","17","21","27","33","35","39","41","42"]
},

draws = [
    {
    when: 'Datum: Zaterdag 08-08-2009',
          picks:[2, 13, 15, 18, 21, 41]
    },

    {
    when: 'Datum: Zaterdag 15-08-2009',
      picks:[6, 19, 24, 25, 35, 37]
    },

    {
    when: 'Datum: Zaterdag 22-08-2009',
      picks:[8, 17, 23, 26, 37, 42]
    },

{
    when: 'Datum: Zaterdag 29-08-2009',
      picks:[1, 11, 31, 39, 42, 43]
    }
];



var buildPlayers = function(){
    var cont = $("#players"), table = $('<table></table>');
    for( player in players ){
    if ( players.hasOwnProperty( player ) ) {
        var tr = $('<tr><th>' + player + '</th></tr>').appendTo(table),
            len = players[player].length;

        for ( var i = 0; i < len; i++) {
            var td = $('<td/>') 
     td.addClass("loss")
    .addClass("pick_" + players[player][i]) // add the class to the td  
    .text( players[player][i] )
    .appendTo ( tr );

    }

        cont.append( table );
    }
    }
};

var buildDraws = function(){
    var cont = $("#draws");
    for(var i = 0; i < draws.length; i++){
    var html = ["<div class='draw'>","<h4 class='drawNum'>Trekking "+(i+1)+"</h3></p>","<div class='date'>"+draws[i].when+"</div>","<ol class='picks'>"];

    for(var j = 0; j < draws[i].picks.length; j++) {
        var img = '<img src="http://www.lotto.nl/static/images/ballen/lotto/l'
        + draws[i].picks[j]
        + '.jpg" alt="'
        + draws[i].picks[j]
        + '" />';
        html.push("<li>"+img+"</li>");
        showWin(draws[i].picks[j]);
    }



    html.push("</ol>","</div>");
    cont.append(html.join(""));
    }
};

var showWin = function(winNum){
    $(".pick_"+winNum).removeClass("loss").addClass("win");
};


$(function(){
    buildPlayers();
    buildDraws();
    });

})();

Answer 1

Oh, I remember working on this last time :p

updated buildPlayers function:

var buildPlayers = function(){
    var cont = $("#players"), table = $('<table></table>');
    for( player in players ){
    if ( players.hasOwnProperty( player ) ) {
        var tr = $('<tr><th>' + player + '</th></tr>').appendTo(table),
            len = players[player].length;

        for ( var i = 0; i < len; i++) {
            var td = $('<td/>') 
     td.addClass("loss")
    .addClass("pick_" + players[player][i]) // add the class to the td  
    .text( players[player][i] )
    .appendTo ( tr );

    }

    **var winning = $('<td>').addClass('winning-col').appendTo(tr);**

        cont.append( table );
    }
    }
};

Updated invocation:

$(function(){
    buildPlayers();
    buildDraws();
    function countWinning() {
    $('#players table tr').each(function() {
        var winning = $('td.win', this), total = 0;
        winning.each(function(i,num) {
     total+= parseInt( $(this).text(), 10);
        });
        $('.winning-col', this).text(total).css('color', 'pink');
    });
    }
    countWinning();
});

Explanation: You basically iterate through every row, inside the function that gets invoked per each table row you count all the winning numbers and count them up, then append the total to the last table cell for the winning column.