[js]动态生成sku组合输入列表 -

liu86th

浏览: 117983 次
性别:

最近访客更多访客>>

spe294096580

邱董233

搓丸子的仙鸣

116856645

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

[js]动态生成sku组合输入列表

博客分类：

jquey

<!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>

效果图：