Javascript array output in table

Question

I have a code which works very nice and I had great help here. The only thing is dat the array players output are not very nice lined up with each other in a table.

My question is, how can this code (array players output) be modified to have it nicely lined up?

<html>    
<head>    
<title>Lotto van Terwijn</title>    
<body>    
<p><img src="../lotto/images/terwijn.png" width="547" height="188"></p>    
<style type="text/css">    
      body {    
        font-family: Verdana, Arial, Helvetica, sans-serif;    
        color: #000000;    
        background-color: #FFFFFF;    
      }    
      .name {    
        color: #000000;    
        font-weight: bold;    
        margin-right: 0.5em;    
      }    
      .picks, .picks * {    
        display: inline;    
        margin: 0;    
        padding: 0;    
        list-style-type: none;    
      }    
      .picks * {    
        margin: auto 0.25em;    
                               color: Yellow;    
      }    
      .win { color: #ffcc00; font-weight: bold }    
      .loss { color: #ff0000; font-weight: bold }    
      .drawNum, #Draws H3 {    
          margin-bottom: 0;    
      }    
    </style>    
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.js">    </script>    
<div id="players"></div>
<div id="draws"></div>

<script type="text/javascript">

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"]
};

var 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");
for(player in players){
var html = ["<div>","<span class='name'>"+player+"</span>", "<ol class='picks'>"];
for(var i = 0; i < players[player].length; i++){
html.push("<li class='loss pick_"+players[player][i]+"'>"+players[player][i]+"</li>");
}

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

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>


</body>

</html>

Zed · Accepted Answer · 2009-08-22 21:29:45Z

1

Use a table instead, or give fixed width to your spans in the css.

answered Aug 22, 2009 at 21:29

Zed

57.8k9 gold badges79 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Over a year ago

ading css to the span worked allmost great, the only think is that the numbers it self are not really lined up. I think it's because they come in a array, is there a way to line them up seperatly? Personally I don't know how to implement it in a table with javascript. I have seen it with document.print, but I think that doesn't fit into this type of coding.

pavium · Accepted Answer · 2009-08-22 22:10:49Z

1

Zed is right: use a table instead of a list.

Then, you can put the stylesheet in the <head>, close the <head> and a few other little details.

answered Aug 22, 2009 at 22:10

pavium

15.2k4 gold badges35 silver badges50 bronze badges

Collectives™ on Stack Overflow

Javascript array output in table

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related