动态生成sku组合输入列表

<!DOCTYPE html>  
<html>  
    <head>  
        <title></title>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <style type="text/css">   
        * { padding: 0; margin: 0; }  
        .demo { padding: 10px; }  
        .demo table { border-collapse: collapse; }  
        .demo table tr td { border: 1px solid #ccc; padding: 4px; }  
        </style>  
    </head>  
    <body>  
        <div id="demo" class="demo">  
              
        </div>  
        <script type="text/javascript">   
            function combine(arr) {  
                var r = [];  
                (function f(t, a, n) {  
                    if (n == 0) return r.push(t);  
                    for (var i = 0; i < a[n-1].length; i++) {  
                        f(t.concat(a[n-1][i]), a, n - 1);  
                    }  
                })([], arr, arr.length);  
                return r;  
            }  
            var arr = [  
                ['1','2', '3'],  
                ['a','b', 'c'],  
                ['x','y','z'],  
                ['e','f','g','h', 'i']];  
            var res = combine(arr);  
              
             //合并单元格  
            var row = [];  
            var rowspan = res.length;  
            for(var n=arr.length-1; n>-1; n--) {  
                row[n] = parseInt(rowspan/arr[n].length);  
                rowspan = row[n];  
            }  
            row.reverse();  
              
            //table tr td  
            var str = "";  
            var len = res[0].length;  
            for (var i=0; i<res.length; i++) {  
                var tmp = "";  
                for(var j=0; j<len; j++) {  
                    if(i%row[j]==0 && row[j]>1) {  
                        tmp += "<td rowspan='"+ row[j] +"'>"+res[i][j]+"</td>";  
                    }else if(row[j]==1){  
                        tmp += "<td>"+res[i][j]+"</td>";  
                    }  
                }  
                str += "<tr>" + tmp + "<td>xxx</td>" + "<td>xxx</td>" + "</tr>";  
            }  
              
            //thead  
            var th = "";  
            for(var k=0; k<len; k++) {  
                th += "<th>"+ k +"</th>";  
            }  
            th = "<thead>"+th+"<th>价格</th>" + "<th>数量</th>" +"</thead>";  
            str = "<table>" + th + str + "</table>";  
              
            document.getElementById('demo').innerHTML = str;  
        </script>  
    </body>  
</html>
效果如下：