從二維數組創建 html

Question

從二維數組生成 Html 的最佳方法是什么

["red", 2 ]
["blue", 3]
["red", 5 ]
["blue", 1]

output Html

●●
○○○
●●●●●
○

javascript

for(var i = 0; i < arr.length; i++) {
    var result = arr[i][0] == 'red' ? '●' : '○';
    var output = '<tr><td>'+ result +'</td></tr>';
    $('table').append(output);
    for(var j = 0; j < $tArr[i][j].length; l++) {
        // how can I use following 2d data add more balls?
    }
}

不是這樣的：

●
○
●
○

Answer 1

那里不需要使用 for 循環，你有球數作為數組中的第二個元素。 使用str.repeat(count) ：

for(var i = 0; i < arr.length; i++) {
    var ball = arr[i][0] == 'red' ? '●' : '○';
    // 'string'.repeat(N) returns 'string' repeated N times
    var result = ball.repeat(arr[i][1]);
    var output = '<tr><td>'+ result +'</td></tr>';
    $('table').append(output);
}