ansaurus

Question

javascript array output in table lined up

Answer 1

+1 A:

 <script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"&gt;&lt;/script&gt;

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

<script type="text/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]
    }
];

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/>').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>","<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();
    });

})();
</script>

meder 2009-08-23 01:14:01

There seems to be some sort of error in my code where the first table row doesn't correctly get created/appended, that's odd.. heh.

meder 2009-08-23 01:16:49

I think it has to do something with the initial insert of the first row in a table.

meder 2009-08-23 01:19:36

@Meder, thank you for your quick reply, when I implement your code I get a blank page. Did I do something wrong? I overwrite the code from<script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"></script>to</script>I left the rest intact.

Chris 2009-08-23 01:22:13

There was a console.log declaration which I was using for testing, try removing it if you copied it - sorry about that.

meder 2009-08-23 01:24:00

modified the code a bit, give it a whirl and let me know.

meder 2009-08-23 01:27:48

@Meder, the code did it's job, I had to make some minor changes to have the names aligned to the left. The only thing that doesn't work are the colors lime and red for the numbers. This part is critical for the function of the website.

Chris 2009-08-23 11:26:38

do you have a link to the updated code?

meder 2009-08-23 11:29:18

Here you are. http://www.coldcharlie.nl/lotto/

Chris 2009-08-23 12:35:14

ansaurus

tags:

views:

answers:

javascript array output in table lined up

related questions