jQuery仿淘宝SKU选择商品属性代码

效果图：

image.png

适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
1、html代码如下：

<div id="navtab1" style="width: 960px; margin:0 auto; padding:20px; border: 1px solid #A3C0E8;">
        <div title="扩展信息" tabid="tabItem3">
            <div id="Div1">
                <div position="center">
                    <div style="padding: 5px 8px;" class="div_content">
                        <div class="div_title"><span>产品规格</span></div>
                        <div class="div_contentlist">
                            <ul class="Father_Title"><li>颜色分类</li></ul>
                            <ul class="Father_Item0">
                                <li class="li_width"><label><input id="Checkbox3" type="checkbox" class="chcBox_Width" value="军绿色" />军绿色<span class="li_empty"  contentEditable="true"></span></label></li>
                                <li class="li_width"><label><input id="Checkbox1" type="checkbox" class="chcBox_Width" value="花色" />花色<span class="li_empty"> </span></label></li>
                                <li class="li_width"><label><input id="Checkbox2" type="checkbox" class="chcBox_Width" value="蓝色" />蓝色<span class="li_empty"> </span></label></li>
                                <li class="li_width"><label><input id="Checkbox4" type="checkbox" class="chcBox_Width" value="褐色" />褐色<span class="li_empty"> </span></label></li>
                                <li class="li_width"><label><input id="Checkbox5" type="checkbox" class="chcBox_Width" value="黄色" />黄色<span class="li_empty"> </span></label></li>
                                <li class="li_width"><label><input id="Checkbox6" type="checkbox" class="chcBox_Width" value="黑色" />黑色<span class="li_empty"> </span></label></li>
                            </ul>
                            <br/>
                            <ul class="Father_Title"><li>尺寸</li></ul>
                            <ul class="Father_Item1">
                                <li class="li_width"><label><input id="Checkbox7" type="checkbox" class="chcBox_Width" value="41" />41<span class="li_empty"> </span></label></li>
                                <li class="li_width"><label><input id="Checkbox8" type="checkbox" class="chcBox_Width" value="42" />42<span class="li_empty"> </span></label></li>
                                <li class="li_width"><label><input id="Checkbox9" type="checkbox" class="chcBox_Width" value="43" />43<span class="li_empty"> </span></label></li>
                            </ul>
                            <br/>
                            <ul class="Father_Title"> <li>类型</li></ul>
                            <ul class="Father_Item2">
                                <li class="li_width"><label><input id="Checkbox10" type="checkbox" class="chcBox_Width" value="港澳台" /><span class="Color_Name">港澳台</span><span class="li_empty"> </span></label></li>
                                <li class="li_width"><label><input id="Checkbox11" type="checkbox" class="chcBox_Width" value="韩国" />韩国<span class="li_empty"> </span></label></li>
                                <li class="li_width"><label><input id="Checkbox12" type="checkbox" class="chcBox_Width" value="亚太" />亚太<span class="li_empty"> </span></label></li>
                            </ul>
                            <br/>
                            <ul class="Father_Title"> <li>品牌</li></ul>
                            <ul class="Father_Item3">
                                <li class="li_width"><label><input id="Checkbox13" type="checkbox" class="chcBox_Width" value="森马" />森马<span class="Color_Name"></span><span class="li_empty"> </span></label></li>
                                <li class="li_width"><label><input id="Checkbox14" type="checkbox" class="chcBox_Width" value="特步" />特步<span class="li_empty"></span></label></li>
                                <li class="li_width"><label><input id="Checkbox15" type="checkbox" class="chcBox_Width" value="361" />361<span class="li_empty"></span></label></li>
                            </ul>
                            <br/>
                        </div>
                        <div class="div_contentlist2">
                            <ul>
                                <li><div id="createTable"></div></li>
                            </ul>
                            <ul><li><input type="button" id="Button1" class="l-button" value="提交"/></li></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

2、js代码：

/**
 * 模拟淘宝SKU添加组合
 * 页面注意事项：
 *      1、 .div_contentlist   这个类变化这里的js单击事件类名也要改
 *      2、 .Father_Title      这个类作用是取到所有标题的值，赋给表格，如有改变JS也应相应改动
 *      3、 .Father_Item       这个类作用是取类型组数，有多少类型就添加相应的类名：如: Father_Item1、Father_Item2、Father_Item3 ...
 */
$(function () {
    //SKU信息
    $(".div_contentlist label").bind("change", function () {
        step.Creat_Table();
    });
    var step = {
        //SKU信息组合
        Creat_Table: function () {
            step.hebingFunction();
            var SKUObj = $(".Father_Title");
            //var skuCount = SKUObj.length;//
            var arrayTile = new Array();//标题组数
            var arrayInfor = new Array();//盛放每组选中的CheckBox值的对象
            var arrayColumn = new Array();//指定列，用来合并哪些列
            var bCheck = true;//是否全选
            var columnIndex = 0;
            $.each(SKUObj, function (i, item){
                arrayColumn.push(columnIndex);
                columnIndex++;
                arrayTile.push(SKUObj.find("li").eq(i).html().replace("：", ""));
                var itemName = "Father_Item" + i;
                //选中的CHeckBox取值
                var order = new Array();
                $("." + itemName + " input[type=checkbox]:checked").each(function (){
                    order.push($(this).val());
                });
                arrayInfor.push(order);
                if (order.join() == ""){
                    bCheck = false;
                }
                //var skuValue = SKUObj.find("li").eq(index).html();
            });
            //开始创建Table表
            if (bCheck == true) {
                var RowsCount = 0;
                $("#createTable").html("");
                var table = $("<table id=\"process\" border=\"1\" cellpadding=\"1\" cellspacing=\"0\" style=\"width:100%;padding:5px;\"></table>");
                table.appendTo($("#createTable"));
                var thead = $("<thead></thead>");
                thead.appendTo(table);
                var trHead = $("<tr></tr>");
                trHead.appendTo(thead);
                //创建表头
                $.each(arrayTile, function (index, item) {
                    var td = $("<th>" + item + "</th>");
                    td.appendTo(trHead);
                });
                var itemColumHead = $("<th  style=\"width:70px;\">价格</th><th style=\"width:70px;\">库存</th> ");
                itemColumHead.appendTo(trHead);
                //var itemColumHead2 = $("<td >商家编码</td><td >商品条形码</td>");
                //itemColumHead2.appendTo(trHead);
                var tbody = $("<tbody></tbody>");
                tbody.appendTo(table);
                ////生成组合
                var zuheDate = step.doExchange(arrayInfor);
                if (zuheDate.length > 0) {
                    //创建行
                    $.each(zuheDate, function (index, item) {
                        var td_array = item.split(",");
                        var tr = $("<tr></tr>");
                        tr.appendTo(tbody);
                        $.each(td_array, function (i, values) {
                            var td = $("<td>" + values + "</td>");
                            td.appendTo(tr);
                        });
                        var td1 = $("<td ><input name=\"Txt_PriceSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
                        td1.appendTo(tr);
                        var td2 = $("<td ><input name=\"Txt_CountSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
                        td2.appendTo(tr);
                        //var td3 = $("<td ><input name=\"Txt_NumberSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
                        //td3.appendTo(tr);
                        //var td4 = $("<td ><input name=\"Txt_SnSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
                        //td4.appendTo(tr);
                    });
                }
                //结束创建Table表
                arrayColumn.pop();//删除数组中最后一项
                //合并单元格
                $(table).mergeCell({
                    // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始
                    cols: arrayColumn
                });
            } else{
                //未全选中,清除表格
                document.getElementById('createTable').innerHTML="";
            }
        },//合并行
        hebingFunction: function () {
            $.fn.mergeCell = function (options) {
                return this.each(function () {
                    var cols = options.cols;
                    for (var i = cols.length - 1; cols[i] != undefined; i--) {
                        // fixbug console调试
                        // console.debug(cols[i]);
                        mergeCell($(this), cols[i]);
                    }
                    dispose($(this));
                });
            };
            function mergeCell($table, colIndex) {
                $table.data('col-content', ''); // 存放单元格内容
                $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
                $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
                $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
                // 进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
                $('tbody tr', $table).each(function (index) {
                    // td:eq中的colIndex即列索引
                    var $td = $('td:eq(' + colIndex + ')', this);
                    // 取出单元格的当前内容
                    var currentContent = $td.html();
                    // 第一次时走此分支
                    if ($table.data('col-content') == '') {
                        $table.data('col-content', currentContent);
                        $table.data('col-td', $td);
                    } else {
                        // 上一行与当前行内容相同
                        if ($table.data('col-content') == currentContent) {
                            // 上一行与当前行内容相同则col-rowspan累加, 保存新值
                            var rowspan = $table.data('col-rowspan') + 1;
                            $table.data('col-rowspan', rowspan);
                            // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
                            $td.hide();
                            // 最后一行的情况比较特殊一点
                            // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
                            if (++index == $table.data('trNum'))
                                $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
                        } else { // 上一行与当前行内容不同
                            // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
                            if ($table.data('col-rowspan') != 1) {
                                $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
                            }
                            // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
                            $table.data('col-td', $td);
                            $table.data('col-content', $td.html());
                            $table.data('col-rowspan', 1);
                        }
                    }
                });
            }
            // 同样是个private函数 清理内存之用
            function dispose($table) {
                $table.removeData();
            }
        },
        //组合数组
        doExchange: function (doubleArrays) {
            var len = doubleArrays.length;
            if (len >= 2) {
                var arr1 = doubleArrays[0];
                var arr2 = doubleArrays[1];
                var len1 = doubleArrays[0].length;
                var len2 = doubleArrays[1].length;
                var newlen = len1 * len2;
                var temp = new Array(newlen);
                var index = 0;
                for (var i = 0; i < len1; i++) {
                    for (var j = 0; j < len2; j++) {
                        temp[index] = arr1[i] + "," + arr2[j];
                        index++;
                    }
                }
                var newArray = new Array(len - 1);
                newArray[0] = temp;
                if (len > 2) {
                    var _count = 1;
                    for (var i = 2; i < len; i++) {
                        newArray[_count] = doubleArrays[i];
                        _count++;
                    }
                }
                //console.log(newArray);
                return step.doExchange(newArray);
            }
            else {
                return doubleArrays[0];
            }
        }
    }
    return step;
})

3、css代码

*{
    padding: 0px;
    margin: 0px;
}
body{
    line-height: 1.6;
    font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif;
    color: #222;
    font-size: 14px;
    width:850px;
    margin:40px auto;
}
li{list-style: none;margin-right:10px;}
li label{cursor: pointer;}
.Father_Item0 li{float: left;}
.Father_Item1 li{float: left;}
.Father_Item2 li{float: left;}
.Father_Item3 li{float: left;}

/*表格样式*/
table#process {
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
table#process th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}
table#process td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}