2009-08-23 10 views
0

私の前の投稿を偶然削除しましたので、再度投稿する必要があります。テーブルのJavascript配列の出力が

私は非常にうまく動作するコードを持っており、私はここで大きな助けをしました。唯一のことは、配列のプレイヤーの出力がテーブル内でうまく並んでいないことです。 幅が固定されている場合は、数字だけが並んでいますが、テーブルのように並べることはありません。

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

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

、あなたは右のbodyタグや画像を編集した:) [テーブル内のJavaScriptのArray出力]の – Chris

+1

可能な複製を(http://stackoverflow.com/questions/1317079/javascript-array -output-in-table) –

答えて

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

(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> 
+0

私のコードには、最初のテーブル行が正しく作成/追加されていない、何らかのエラーがあるようです。 –

+0

私はテーブルの最初の行の最初の挿入で何かをしなければならないと思います。 –

+0

@Meder、すぐに返信いただきありがとうございます。コードを実装すると空白のページが表示されます。私は間違ったことをしましたか?私はそのまま残りを左 に ます。