Someone made a nice code for me, but after some changes to have the output lined out in a table, the array picks font doesn't change anymore which are controlled by the following CSS.
.win { color: lime; font-weight: bold }
.loss { color: red; font-weight: bold }
Can somebody help me edit the code so the array picks are lime and red again when there is a win or not?
<html>
<head>
<title>Lotto van Terwijn</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" />
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #006699;
background-color: #FFFFF;
}
.name {
float: left;
width: 100px;
color: #006699;
font-weight: bold;
margin-right: 0.50em;
}
.picks, .picks * {
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
}
.picks * {
margin: auto 0.50em;
color: Yellow;
}
.win { color: lime; font-weight: bold }
.loss { color: red; font-weight: bold }
.drawNum, #Draws H3 {
margin-bottom: 0;
}
ul
{
list-style-type: none;
padding-left: 0px;
}
th
{
text-align:left;
padding-right:30px;
padding-top:5px;
padding-bottom:5px;
}
tr
{
text-align:left;
padding-right:30px;
padding-top:12px;
}
</style>
<body>
<p><img src="../lotto/images/terwijn.png" width="547" height="188"></p>
<script type="text/javascript" src="../lotto/lotto.js"></script>
<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>
</body>
</html>