以下是 jquery仿淘宝SKU选择商品属性代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery仿淘宝SKU选择商品属性代码</title>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/liandong.js"></script>
<link type="text/css" rel="stylesheet" href="liandong.css">
</head>
<body>
<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>产品规格</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>
</body>
</html>
JS代码(liandong.js):
/** * Created by Administrator on 14-12-01. * 妯℃嫙娣樺疂SKU娣诲姞缁勫悎 * 椤甸潰娉ㄦ剰浜嬮」锛? * 1銆?.div_contentlist 杩欎釜绫诲彉鍖栬繖閲岀殑js鍗曞嚮浜嬩欢绫诲悕涔熻鏀? * 2銆?.Father_Title 杩欎釜绫讳綔鐢ㄦ槸鍙栧埌鎵€鏈夋爣棰樼殑鍊硷紝璧嬬粰琛ㄦ牸锛屽鏈夋敼鍙楯S涔熷簲鐩稿簲鏀瑰姩 * 3銆?.Father_Item 杩欎釜绫讳綔鐢ㄦ槸鍙栫被鍨嬬粍鏁帮紝鏈夊灏戠被鍨嬪氨娣诲姞鐩稿簲鐨勭被鍚嶏細濡? Father_Item1銆丗ather_Item2銆丗ather_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();
//鐩涙斁姣忕粍閫変腑鐨凜heckBox鍊肩殑瀵硅薄 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;
//閫変腑鐨凜HeckBox鍙栧€? 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();
}
);
//寮€濮嬪垱寤篢able琛? 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杩欎箞涓€涓厤缃」,鐢ㄦ暟缁勮〃绀哄垪鐨勭储寮?浠?寮€濮? 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);
// 瀛樻斁璁＄畻鐨剅owspan鍊?榛樿涓? $table.data('col-td',$());
// 瀛樻斁鍙戠幇鐨勭涓€涓笌鍓嶄竴琛屾瘮杈冪粨鏋滀笉鍚宼d(jQuery灏佽杩囩殑),榛樿涓€涓?绌?鐨刯query瀵硅薄 $table.data('trNum',$('tbody tr',$table).length);
// 瑕佸鐞嗚〃鏍肩殑鎬昏鏁? 鐢ㄤ簬鏈€鍚庝竴琛屽仛鐗规畩澶勭悊鏃惰繘琛屽垽鏂箣鐢? // 杩涜"鎵潰"澶勭悊 鍏抽敭鏄畾浣峜ol-td,鍜屽叾瀵瑰簲鐨剅owspan $('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();
// 鏈€鍚庝竴琛岀殑鎯呭喌姣旇緝鐗规畩涓€鐐? // 姣斿鏈€鍚?琛?td涓殑鍐呭鏄竴鏍风殑,閭ｄ箞鍒版渶鍚庝竴琛屽氨搴旇鎶婃鏃剁殑col-td閲屼繚瀛樼殑td璁剧疆rowspan if (++index == $table.data('trNum')) $table.data('col-td').attr('rowspan',$table.data('col-rowspan'));
}
else{
// 涓婁竴琛屼笌褰撳墠琛屽唴瀹逛笉鍚? // col-rowspan榛樿涓?,濡傛灉缁熻鍑虹殑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;
}
)CSS代码(liandong.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;}
分享到QQ
分享到微博
微信扫一扫
