Question

我有一个2维javascript数组var products = [ [M, L, XL], [red, green], [longsleve, t-shirt] ];，应该打印到HTML表格中。

每个表格列应包含所有可能组合中的一个。像这样：

M  red     longsleve
M  red     t-shirt
M  green   longsleve
M  green   t-shirt
L  red     longsleve
L  red     t-shirt
L  green   longsleve
L  green   t-shirt
XL red     longsleve
XL red     t-shirt
XL green   longsleve
XL green   t-shirt

示例数组有3个事实（大小，颜色，类型），但它也应该与其他只有1个事实（大小）或n个事实的数组一起使用。

不幸的是，所有这些迭代似乎让我发疯。我不明白:(

Answer 1

您可以简单地使用三个嵌套循环。例如：

var products = [
    ['M', 'L', 'XL'],
    ['red', 'green'],
    ['longsleve', 't-shirt']
];

var table = document.querySelector('table');

for (var i = 0; i < products[0].length; i++) {
    for (var j = 0; j < products[1].length; j++) {
        for (var k = 0; k < products[2].length; k++) {
            table.insertAdjacentHTML('beforeend', [
                '<tr>',
                    '<td>' + products[0][i] + '</td>',
                    '<td>' + products[1][j] + '</td>',
                    '<td>' + products[2][k] + '</td>',
                '</tr>'
            ].join(''));
        }   
    }
}

table {border-collapse: collapse;}
table td {border: 1px #AAA solid; padding: 5px;}

<table></table>

Answer 2

如果你想处理任何长度的数组，你需要一个递归的解决方案：

＆＃13;

var products = [ ['M', 'L', 'XL'],
                 ['red', 'green'], 
                 ['longsleve', 't-shirt'], 
                 ['boy', 'girl'] 
               ];

function build(arr, prefix) {
  var s= '';
  arr[0].forEach(function(val) {
    var sl= arr.slice(1),
        out= prefix + '<td>' + val;
    
    if(sl.length) {
      s+= build(sl, out);
    }
    else {
      s+= out;
    }
  });
  return s;
} //build

document.body.innerHTML= '<table>' + build(products, '<tr>') + '</table>';

＆＃13;

table {
  font: 12px verdana;
  border-collapse: collapse;
}
td {
  padding: 0.2em;
  border: 1px solid #ddd;
}

＆＃13;

将二维ARRAY填充到TABLE中（输出所有可能的组合）

2 个答案: