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

时间:2015-04-03 21:15:26

标签: javascript jquery html arrays loops

我有一个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个事实的数组一起使用。

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

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

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

&#13;
&#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;
&#13;
&#13;