淘宝sku的组合

最新推荐文章于 2023-06-01 19:45:20 发布
TracyTracy_1
最新推荐文章于 2023-06-01 19:45:20 发布
阅读量816
点赞数
 
 <!DOCTYPE html>   
 
 <html>   
 
 <head>   
 
 <meta name= 
 "viewport" 
  content= 
 "width=device-width" 
  />   
 
 <script src= 
 "Scripts/jquery-1.8.2.min.js" 
 ></script>   
 
 <title></title>   
 
 <script>   
 
 $( 
 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 = $( 
 "<td>" 
  + item +  
 "</td>" 
 );   
 
 td.appendTo(trHead);   
 
 });   
 
 var 
  itemColumHead = $( 
 "<td  style=\"width:70px;\">价格</td><td style=\"width:70px;\">数量</td> " 
 );   
 
 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   
 
 });   
 
 }   
 
 }, 
 //合并行   
 
 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 
 ));   
 
 });   
 
 };   
 
 // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法               
 
 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;   
 
 })   
 
 </script>   
 
 <style type= 
 "text/css" 
 >   
 
 form {   
 
 margin: 0;   
 
 }   
 
 textarea {   
 
 display: block;   
 
 }   
 
 </style>   
 
 <style>   
 
 .chcBox_Width {   
 
 width: 18px;   
 
 }   
 
 .li_width {   
 
 width: 110px;   
 
 }   
 
 .guige_ul {   
 
 padding-left: 20px;   
 
 background-color: 
  #F8F8F8;   
 
 }   
 
 .table_head {   
 
 line-height: 23px;   
 
 margin-left: 20px;   
 
 border-color: 
  #D7D7D7;   
 
 }   
 
 </style>   
 
 <link href= 
 "Content/css/addProduct.css" 
  rel= 
 "stylesheet" 
  />   
 
 </head>   
 
 <body style= 
 "padding: 10px" 
 >   
 
 <div id= 
 "navtab1" 
  style= 
 "width: 100%; 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  
 class 
 = 
 "infor_title" 
 > </span>产品规格        
 
 <div>   
 
 <hr />   
 
 </div>   
 
 </div>   
 
 <div  
 class 
 = 
 "div_contentlist" 
 >   
 
 <ul  
 class 
 = 
 "Father_Title" 
 >   
 
 <li>颜色分类：</li>   
 
 </ul>   
 
 <ul  
 class 
 = 
 "Father_Item0" 
  style= 
 "padding-left: 20px; background-color: #F8F8F8;" 
 >   
 
 <li  
 class 
 = 
 "li_width1" 
 >   
 
 <label>   
 
 <input id= 
 "Checkbox3" 
  type= 
 "checkbox" 
  class 
 = 
 "chcBox_Width" 
  value= 
 "军绿色" 
  />军绿色<span  
 class 
 = 
 "li_empty" 
 > </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>   
 
 <ul  
 class 
 = 
 "Father_Title" 
 >   
 
 <li>尺寸：</li>   
 
 </ul>   
 
 <ul  
 class 
 = 
 "Father_Item1" 
  style= 
 "padding-left: 20px; background-color: #F8F8F8;" 
 >   
 
 <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>   
 
 <ul  
 class 
 = 
 "Father_Title" 
 >   
 
 <li>类型：</li>   
 
 </ul>   
 
 <ul  
 class 
 = 
 "Father_Item2" 
  style= 
 "padding-left: 20px; background-color: #F8F8F8;" 
 >   
 
 <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>   
 
 </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>   
 
 </body>   
 
 </html>