帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

基于jquery实现的仿淘宝动态生成SKU表格实例

帝国模板之家 2020-10-27 网页特效 评论

jQuery仿淘宝商品发布动态生成SKU表格实例代码,一款非常实用的商城商品生成SKU表格代码,还可以自定义sku属性。

<!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" />
<link rel="stylesheet" href="css/sku_style.css" />
<title>仿淘宝动态生成SKU表格实例(zxw)</title>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/createSkuTable.js"></script>
<script type="text/javascript" src="js/customSku.js"></script>
<script type="text/javascript" src="plugins/layer/layer.js"></script>

</head>
<body>

        <div class="demo-title">淘宝商户端发布商品时,动态生成SKU表格的实例</div>
        <ul class="SKU_TYPE">
            <li is_required='1' propid='1' sku-type-name="存储"><em>*</em>存储:</li>
        </ul>
        <ul>
            <li><label><input type="checkbox" class="sku_value" propvalid='11' value="16G" />16G</label></li>
            <li><label><input type="checkbox" class="sku_value" propvalid='12' value="32G" />32G</label></li>
            <li><label><input type="checkbox" class="sku_value" propvalid='13' value="64G" />64G</label></li>
            <li><label><input type="checkbox" class="sku_value" propvalid='14' value="128G" />128G</label></li>
            <li><label><input type="checkbox" class="sku_value" propvalid='15' value="256G" />256G</label></li>
        </ul>
        <div class="clear"></div>
        <ul class="SKU_TYPE">
            <li is_required='1' propid='2' sku-type-name="版本"><em>*</em>版本:</li>
        </ul>
        <ul>
            <li><label><input type="checkbox" class="sku_value" propvalid='21' value="中国大陆版" />中国大陆版</label></li>
            <li><label><input type="checkbox" class="sku_value" propvalid='22' value="港版" />港版</label></li>
            <li><label><input type="checkbox" class="sku_value" propvalid='23' value="韩版" />韩版</label></li>
            <li><label><input type="checkbox" class="sku_value" propvalid='24' value="美版" />美版</label></li>
            <li><label><input type="checkbox" class="sku_value" propvalid='25' value="日版" />日版</label></li>
        </ul>
        <div class="clear"></div>
                    
        <ul class="SKU_TYPE">
            <li is_required='0' propid='3' sku-type-name="颜色">颜色:</li>
        </ul>
        <ul>
            <li><label><input type="checkbox" class="sku_value" propvalid='31' value="土豪金" />土豪金</label></li>
            <li><label><input type="checkbox" class="sku_value" propvalid='32' value="银白色" />银白色</label></li>
            <li><label><input type="checkbox" class="sku_value" propvalid='33' value="深空灰" />深空灰</label></li>
            <li><label><input type="checkbox" class="sku_value" propvalid='34' value="黑色" />黑色</label></li>
            <li><label><input type="checkbox" class="sku_value" propvalid='33' value="玫瑰金" />玫瑰金</label></li>
        </ul>
        <div class="clear"></div>
        <ul class="SKU_TYPE">
            <li is_required='1' propid='4' sku-type-name="类型"><em>*</em>类型:</li>
        </ul>
        <ul>
            <li><label><input type="checkbox" class="sku_value" propvalid='41' value="儿童" />儿童</label></li>
            <li><label><input type="checkbox" class="sku_value" propvalid='42' value="成人" />成人</label></li>
        </ul>
        <div class="clear"></div>
        <button class="cloneSku">添加自定义sku属性</button>

        <!--sku模板,用于克隆,生成自定义sku-->
        <div id="skuCloneModel" style="display: none;">
            <div class="clear"></div>
            <ul class="SKU_TYPE">
                <li is_required='0' propid='' sku-type-name="">
                    <a href="javascript:void(0);" class="delCusSkuType">移除</a>
                    <input type="text" class="cusSkuTypeInput" />:
                </li>
            </ul>
            <ul>
                <li>
                    <input type="checkbox" class="model_sku_val" propvalid='' value="" />
                    <input type="text" class="cusSkuValInput" />
                </li>
                <button class="cloneSkuVal">添加自定义属性值</button>
            </ul>
            <div class="clear"></div>
        </div>
        <!--单个sku值克隆模板-->
        <li style="display: none;" id="onlySkuValCloneModel">
            <input type="checkbox" class="model_sku_val" propvalid='' value="" />
            <input type="text" class="cusSkuValInput" />
            <a href="javascript:void(0);" class="delCusSkuVal">删除</a>
        </li>
        <div class="clear"></div>
        <div id="skuTable"></div>
        <script type="text/javascript" src="js/getSetSkuVals.js"></script>
    </body>
</html>
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言