将 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

也许示例输入的格式不正确，但重用了预定义的表格和 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

Answer 2

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/