js 用什么方法能生成如下电商商品属性表格

Question

var totalList = [];
var json1={name:"规格",data:["大","小"]};
var json2={name:"颜色",data:["红色","黑色"]};
var json3={name:"尺寸",data:["1寸","2寸"]};
var json4={name:"模式",data:["普通","特殊"]};
totalList.push(json1);
totalList.push(json2);
totalList.push(json3);
totalList.push(json4);
类似上面这段json 想生成类似上图这样的表格,需要用到递归吗？如果用到应该怎么写,不用递归 应该怎么做,求大神解答

Answer 1

不就是样式，颜色和尺寸的全排列，你的样式是什么鬼，模式还是规格，而且另外一组数据干嘛用的Web开发学习资料推荐
easyui datagrid fitColumns:true失效解决办法
jquery attr prop 区别

Answer 2

对就是全排列,表格的图片 就是给的一个参考,第二组 是 需要组成表格的 数据 ，主要是这个全排列应该怎么写呢?能给小弟解答一下,写个小demo 做个参考吗

Answer 3

<script>
    var json1 = { name: "规格", data: ["大", "小"] };
    var json2 = { name: "颜色", data: ["红色", "黑色", "蓝色"] };
    var json3 = { name: "尺寸", data: ["1寸", "2寸"] };
    var sizeRowSpan = json2.data.length * json3.data.length, colorRowSpan = json3.data.length;
    var s = '', sizeTD = '', colorTd = '';
    for (var i = 0; i < json1.data.length; i++) {
        sizeTD = '<td rowspan="' + sizeRowSpan + '">' + json1.data[i] + '</td>'
        for (var j = 0; j < json2.data.length; j++) {
            colorTd = '<td rowspan="' + colorRowSpan + '">' + json2.data[j] + '</td>'
            for (var k = 0; k < json3.data.length; k++) {
                s += '<tr>' + (k == 0 ? sizeTD + colorTd : '') + '<td>' + json3.data[k] + '</td><td>其他输入项</td></tr>'
            }
            sizeTD = '';
        }
    }
    document.write('<table border="1">' + s + '</table>')
</script>