输出一个3D数组作为表

Question

我正在做一个作业的二十一点游戏，并有排行榜和卡阵列。

我想打印这样的排行榜。卡（在单个单元格中）|总。

帮助，将理解的是，得益于

function makeTable(leaderBoard) { 
    var table = document.createElement('table'); 
    for (var i = 0; i < leaderBoard.length; i++) { 
     var row = document.createElement('tr'); 
     for (var j = 0; j < leaderBoard[i].length; j++) { 
      var cell = document.createElement('td'); 
      cell.textContent = leaderBoard[i][j]; 
      row.appendChild(cell); 
     } 
     table.appendChild(row); 
    } 
    document.getElementById('leaderBoard').innerHTML = table; 
} 

Answer 1

function makeTable(leaderBoard) { 
    var table = document.createElement('table'); 
    var row = document.createElement('tr'); 
    for (var i = 0; i < leaderBoard[0].length; i++) { 
     var cell = document.createElement('td'); 
     cell.textContent = leaderBoard[0][i]; 
     row.appendChild(cell); 
    } 
    var cell = document.createElement('td'); 
    cell.textContent = "Total: " + leaderBoard[1]; 
    row.appendChild(cell); 
    table.appendChild(row); 
    document.getElementById('leaderBoard').appendChild(table); 
} 

var userCards = ["Card 1", "Card 2", "Card 3"]; 
var userTotal = 10; 
makeTable([userCards, userTotal]); 

http://jsfiddle.net/25kg3nnq/

Answer 2

也许示例输入不是以正确的格式，但再利用一个预定义的表和HTML表的功能，如insertRow和insertCell（不一定更好，但它们可以比createElement和append更容易）：

<div id="leaderBoard"><table id=leaderTable></table></div> 

function updateleaderboard(leaderBoard) {  
    var table = document.getElementById('leaderTable'); 
    while(table.rows.length > 0) table.deleteRow(0); //remove prev values, if any  
    for (var i = 0; i < leaderBoard.length; i++) { //If the function is always used on a winner (no ties), the loop isn't really needed 
     var row =table.insertRow(); 
     var arrCards = leaderBoard[i++]; 
     var total = row.insertCell(); 
     total.className = 'res'; 
     total.textContent = leaderBoard[i]; 
     arrCards.forEach(function(c,ind){ 
      row.insertCell(ind).textContent = c; 
     }); 
    } 
} 

var cards = [['Q','4','5'],19]; 

updateleaderboard(cards); 

Fiddle