2009-08-22 6 views
0

私は非常にうまく動作するコードを持っており、私はここで大きな助けをしていました。唯一のことは、配列のプレイヤーの出力は、テーブル内でお互いに並んでいないことです。テーブルのJavascript配列の出力

私の質問は、このコード(アレイプレーヤーの出力)はどうやってうまく整列するように修正できますか?

<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> 

答えて

1

代わりに表を使用するか、CSSのスパンに固定幅を指定します。

+0

スパンへのassssssは一生懸命働いた、唯一の考えは、それが本当に並んでいる数字ではないということです。私は彼らが配列で来るからだと思う、それらを別々に並べる方法があるのだろうか? 個人的に私はjavascriptを使ってテーブルに実装する方法がわかりません。私はdocument.printでそれを見ましたが、このタイプのコーディングには適していないと思います。 – Chris

1

Zedが正しい:リストの代わりにテーブルを使用します。

その後、あなたは<ヘッド>といくつかの他のほとんどの詳細を閉じ、<ヘッド>にスタイルシートを置くことができます。