列表中的Javascript數組輸出

我刪除了以前的帖子，因此我需要將其重新發布。列表中的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>

來源

2009-08-23 Chris

@達科Z，已編輯的身體標記和圖像右:) – Chris 2009-08-23 01:13:38

[表Javascript數組輸出（的可能的複製http://stackoverflow.com/questions/1317079/javascript-array -output-in-table） – 2016-12-31 22:11:29

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

來源

2009-08-23 01:14:01

在我的代碼中似乎有某種錯誤，其中第一個錶行不能正確地創建/附加，這很奇怪......嘿。 – 2009-08-23 01:16:49

我認爲它必須對錶中第一行的初始插入操作進行操作。 – 2009-08-23 01:19:36

@Meder，感謝您的快速回復，當我實現您的代碼時，我得到一個空白頁。我做錯什麼了嗎？我覆蓋從 <腳本類型= 「文本/ JavaScript的」 SRC = 「http://jquery.com/src/jquery-latest.js」> 到代碼我離開其餘完好。 – Chris 2009-08-23 01:22:13

列表中的Javascript數組輸出

回答

相關問題