简易版的商品sku表格

效果图

 //初始化规格
    function initGui (arr){
        var str='';
      $.each(arr,(i,obj)=>{
         str+=`<div class="s-item form-group">
                   <div class="col-md-2">
                       <input type="text" class="form-control st" value='${obj.s}'/>
                   </div>
                   <div class="col-md-8">
          <div class="row">`;
          $.each(obj.v,(i,val)=>{
              str+=`<div class="col-md-3" style="margin-bottom:10px">
                            <div class="input-group">
                                <span class="input-group-addon">
                                  <input type="checkbox" value='${val}'>
                                </span>
                                <input type="text" class="form-control" value='${val}'>
                              </div>
                           </div>`
          });
        str+=`</div>
                </div>
                  </div>`       
      });
      $('.speci').append(str);
    }
    //商品组合
    function calcDescartes (array) {
    if (array.length < 2) return array[0] || [];
    return [].reduce.call(array, function (col, set) {
        var res = [];
        col.forEach(function (c) {
            set.forEach(function (s) {
                var t = [].concat(Array.isArray(c) ? c : [c]);
                t.push(s);
                res.push(t);
            })
        });
        return res;
    });
}
//初始化表格
    function initTable (){
        $('#skuTable thead tr').html('');
        $('#skuTable tbody').html('');
         //循环所有的行，判断选中的
         var allSKU='';
         var guiArray=[];
         var stArray=[];
         $('.s-item').each((i,val)=>{
             var allCheckbox=$(val).find('input:checkbox');
             var flag=false;
             var array=[];
             allCheckbox.each((i,checkbox)=>{
                 if($(checkbox).is(':checked')){ 
                     array.push($(checkbox).val());
                     stArray.push($(val).find('.st').val())
                 }
             });
             stArray=Array.from(new Set(stArray))
             guiArray.push(array);
             guiArray=guiArray.filter(function(current){
                 return current.length>0
             });

         });
        
        //循环stArray拼表头
        //循环allSKU拼tbody
        var strhead=''
        $.each(stArray,(i,val)=>{
            strhead+=`<th width="140px">${val}</th>`;
        });
        strhead+=`<th>商品SKU码</th>
                        <th>销售价</th>
                        <th>优惠价</th>
                        <th>库存</th>
                        <th>是否启用</th>`;
         $('#skuTable thead tr').append(strhead);
         //所有的sku组合
        allSKU=calcDescartes(guiArray);
        $.each(allSKU,(i,obj)=>{
            var tr='<tr>';
            if(obj instanceof Array){
                $.each(obj,(i,val)=>{
                  tr+=`<td>${val}</td>`;
                });
            }else{
                tr+=`<td>${obj}</td>`
            }
           
            tr+=`
             <td><input type="text" class="form-control"/></td>
             <td><input type="text" class="form-control"/></td>
             <td><input type="text" class="form-control"/></td>
             <td><input type="text" class="form-control"/></td>
             <td style="text-align:center"><input type="checkbox" /></td>
            </tr>`;
            $('#skuTable tbody').append(tr);
        })
        
    }
    //去掉数组中空的项目
    function deleteNull(arr){
        result1 = arr.filter(function(currentValue){
        return currentValue.length>0;
      })
    }