现在网购商品几乎都是多商品属性的天下了，从淘宝、天猫、京东、当当、亚马逊及各路大小电商，商品的属性几乎全是灵活的多属性，这对于后台的设置及管理也是个不大不小的技术难题，近日写了一个，分享给大家。虽然还有待完善，但是已经可以使用。欢迎技术更强者指点指点。bubufx#qq.com（#换成@）。
先上效果图：
html代码（复制下来存入html文件，再拷贝过去jquery-1.8.1.min.js即可运行）：
<!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>无标题文档</title>
<script language="javascript" type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script language="javascript" type="text/javascript">
function delAttribute(attrID)
{
$("#divAttr"+attrID).remove();
selectAttributeValue();
$("#content").val("bubufx_divAttributes的值\n"+$("#bubufx_divAttributes").html());
}
function addAttribute()
{
//取得当前已添加属性中最大的ID，在此基础上加1，是新添加属性的ID
var attrArr = document.getElementsByName("attr_bubufx_Name");
var attrID=1;
if(attrArr.length>0)
attrID = parseInt(attrArr[attrArr.length-1].value) + 1;
//
var attrHtmlOne="";
//组成一个属性,将属性的ID存入hidden中
attrHtmlOne="<div id=\"divAttr"+attrID+"\" name=\"divAttr\">"+
"<span><input type=\"text\" id=\"tbAttr"+attrID+"\" name=\"tbAttr"+attrID+"\" value=\"\" size=\"5\" style=\"background-color:#ccc\" /></span>"+
"<span id=\"attrZiSpan"+attrID+"\"></span>"+
"<span>"+
"<input id=\"attrZiCount"+attrID+"\" type=\"hidden\" value=\"0\" />"+
"<input type=\"button\" onclick=\"addAttributeValue(’"+attrID+"’)\" value=\"+添加\" />"+
"<input type=\"button\" onclick=\"delAttribute(’"+attrID+"’)\" value=\"-删除\" />"+
"</span>"+
"<input id=\"attrID_"+attrID+"\" name=\"attr_bubufx_Name\" type=\"hidden\" value=\""+attrID+"\" />"+
"</div>";
//添加一个属性
$("#bubufx_divAttributes").append(attrHtmlOne);
$("#content").val("bubufx_divAttributes的值\n"+$("#bubufx_divAttributes").html());
}
//添加子属性
function addAttributeValue(attrID)
{
var attrZiCount = parseInt($("#attrZiCount"+attrID).val());
var attrZiCurrent = attrZiCount+1;
var attrHtmlZiOne="";
attrHtmlZiOne = "<span><input type=\"checkbox\" id=\"cbAttr"+attrID+attrZiCurrent+"\" name=\"cbAttr"+attrID+attrZiCurrent+"\" onclick=\"selectAttributeValue()\" /></span>"+
"<span><input type=\"text\" id=\"tbAttrZi"+attrID+attrZiCurrent+"\" name=\"tbAttrZi"+attrID+attrZiCurrent+"\" value=\"\" size=\"5\" /></span>"+
" ";
//添加一个子属性
$("#attrZiSpan"+attrID).append(attrHtmlZiOne);
//增加子属性数量
$("#attrZiCount"+attrID).val(parseInt($("#attrZiCount"+attrID).val())+1);
//
$("#content").val("bubufx_divAttributes的值\n"+$("#bubufx_divAttributes").html());
}
function selectAttributeValue()
{
//用name属性获得所有属性ID的数组
var attrArr = document.getElementsByName("attr_bubufx_Name");
var tabstr = "";
if(attrArr.length>0)
{
var tabWidth = 700 + 100 * attrArr.length;
tabstr=tabstr+"<table width=\""+tabWidth+"\" border=\"1\" id=\"bubufx_tabAttributeset\">";
//添加表头
tabstr=tabstr+"<tr>";
for(var acI=0;acI<attrArr.length;acI++)
{
tabstr=tabstr+"<td bgcolor=\"#CCFFFF\">"+$("#tbAttr"+attrArr[acI].value).val()+"</td>";
}
tabstr=tabstr+"<td bgcolor=\"#CCFFFF\">库存量</td>";
tabstr=tabstr+"<td bgcolor=\"#CCFFFF\">价格</td>";
tabstr=tabstr+"<td bgcolor=\"#CCFFFF\">监测数据</td>";
tabstr=tabstr+"</tr>";
//
//递归，返回
tabstr=tabstr+getAttr(1,"1"); //lelString初始化是1，无实际意义
//
tabstr=tabstr+"</table>";
}
$("#bubufx_tabAttributes").html(tabstr);
$("#bubufx_tabAttributes").html("\n\n"+tabstr);
$("#contentV").val("bubufx_tabAttributes的值\n"+$("#bubufx_tabAttributes").html());
}
function getAttr(cAttrLevel,lelString)
{
//cAttrLevel是当前属性层,lelString层字符串（2,1,3，第一层属性第2个，第二层属性第1个，第三层属性第3个）
var rStr=""; //返回字符串
//属性ID字符串
var attrArr = document.getElementsByName("attr_bubufx_Name");
//当前属性ID
var cAttrID=parseInt(attrArr[cAttrLevel-1].value);
//当前属性中子属性数量
var jCount=parseInt($("#attrZiCount"+cAttrID).val());
//循环子属性
for(var j = 1;j <= jCount;j++)
{
if(parseInt(cAttrLevel) < attrArr.length)
{
rStr=rStr+getAttr(cAttrLevel+1,lelString+","+j);
}
else
{
var lelStringArr=(lelString+","+j).split(",");
//判断是否选中，全部选中才显示
var cbFlag=true;
for(var x=1;x<lelStringArr.length;x++)
{
var _aID = parseInt(attrArr[x-1].value);
if(!$("#cbAttr"+_aID+lelStringArr[x]).attr("checked"))
cbFlag=false;
}
//
if(cbFlag)
{
var IDstr=""; //存放ID，用于定位生成，的行如2_1_3,表示第一个属性的第2个，第二个属性的第1个，第三个属性的第3个
var DESstr=""; //属性值，临时显示
rStr=rStr+"<tr>";
for(var n=1;n<lelStringArr.length;n++)
{
var _nID = parseInt(attrArr[n-1].value);
rStr=rStr+"<td>"+$("#tbAttrZi"+_nID+lelStringArr[n]).val()+"</td>";
IDstr = (IDstr == ""?lelStringArr[n]:IDstr + "_" + lelStringArr[n]);
DESstr = (DESstr == ""?$("#tbAttrZi"+_nID+lelStringArr[n]).val():DESstr + "," + $("#tbAttrZi"+_nID+lelStringArr[n]).val());
}
var IDshiji="";
IDshiji=idJiexi(IDstr);
rStr=rStr+"<td><input id=\"kucun_"+IDstr+"\" name=\"kucun_"+IDstr+"\" type=\"text\" size=\"10\" /></td>";
rStr=rStr+"<td><input id=\"jiage_"+IDstr+"\" name=\"jiage_"+IDstr+"\" type=\"text\" size=\"10\" /></td>";
rStr=rStr+"<td>tech.bubufx.com提示：【"+IDshiji+"】【"+IDstr+"|"+DESstr+"】</td>";
rStr=rStr+"<input id=\"tbHDid_"+IDstr+"\" name=\"tbHDname\" type=\"hidden\" value=\""+IDstr+"\" />";
rStr=rStr+"</tr>";
}
}
}
//
return rStr;
}
//通过ID解析出属性控件ID，并通过属性控件ID获得属性描述
function idJiexi(idStr)
{
//属性ID字符串
var attrArr = document.getElementsByName("attr_bubufx_Name");
var strArr=("0_"+idStr).split("_");
var rStr="";
var rDesStr="";
for(var i=1;i<strArr.length;i++)
{
if(rStr=="")
rStr=attrArr[i-1].value+strArr[i];
else
rStr=rStr+"_"+attrArr[i-1].value+strArr[i];
if(rDesStr=="")
rDesStr=$("#tbAttrZi"+attrArr[i-1].value+strArr[i]).val();
else
rDesStr=rDesStr+"_"+$("#tbAttrZi"+attrArr[i-1].value+strArr[i]).val();
}
return "ID("+rStr+")通过ID取值("+rDesStr+")";
}
function getAttrVal()
{
var cDiv = document.getElementsByName("tbHDname");
var str="";
if(cDiv.length>0)
{
for(var i=0;i<cDiv.length;i++)
{
var _ID=$("#tbHDid_"+cDiv[i].value).val();
str=str+"[id="+_ID+"]["+$("#kucun_"+_ID).val()+"],["+$("#jiage_"+_ID).val()+"],["+$("#huohao_"+_ID).val()+"]\r\n";
}
}
$("#content").val("bubufx_tabAttributes的值\n"+str);
}
</script>
</head>
<body>
<input type="button" value="添加属性" onclick="addAttribute()" />
<div id="bubufx_divAttributes"></div>
<div id="bubufx_tabAttributes"></div>
<p>
<input name="button" type="button" onclick="getAttrVal()" value="商品属性取值" />
</p>
<p> 监测生成的代码：</p>
<p><textarea id="content" name="content" rows="20" cols="70"></textarea><textarea id="contentV" name="contentV" rows="20" cols="70"></textarea></p>
</body>
</html>
本代码使用的jquery是1.8.3版本，对应文件“jquery-1.8.1.min.js”。