将二维数组填充到表中（输出所有可能的组合）答案

【问题标题】：Populate two-dimensional ARRAY into TABLE (output ALL possible COMBINATIONS)将二维数组填充到表中（输出所有可能的组合）
【发布时间】：2015-04-03 21:15:25
【问题描述】：

我有一个二维 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 个事实的其他数组。

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

【问题讨论】：

我认为您将不得不更好地解释一下您拥有什么以及您最终想要什么。
你从什么开始？你想以什么结束？你试过什么？
我从商店网站解析数据。有些产品只有尺寸可供选择，有些产品有尺寸和颜色。有些有尺寸、颜色和衬衫类型可供选择。解析的结果是一个如图所示的数组。我想半自动生成产品列以在亚马逊市场上创建产品。产品的每个变体都需要在表格中有自己的一行。

标签： javascript jquery html arrays loops

【解决方案1】：

如果要处理任意长度的数组，则需要递归解决方案：

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

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

【讨论】：

太棒了！这正是我所需要的。 :)

【解决方案2】：

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

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

&lt;table&gt;&lt;/table&gt;

【讨论】：

非常感谢。这行得通。但它只适用于恰好 3 个事实。如果数组只有 2、1 或 4 个事实，则它不起作用，例如 var products = [ [M, L, XL], [longsleve, t-shirt] ];