商品规格，自定义SKU类型

<html>

<head>

    <script type="text/javascript" src="http://xoxco.com/examples/jquery.min.js"></script>

    <script type="text/javascript" src="tagsinput.js"></script>

    <link href="bootstrap.min.css" rel="stylesheet" />

    <style type="text/css">

        .tagsinput {

            border: 1px solid #CCC;

            background: #FFF;

            padding: 5px;

            width: 100%;

            min-width: 760px;

            height: 50px;

        }

       .tagsinput span.tag {

                border: 1px solid #a5d24a;

                -moz-border-radius: 2px;

                -webkit-border-radius: 2px;

                display: block;

                float: left;

                padding: 5px;

                text-decoration: none;

                background: #cde69c;

                color: #638421;

                margin-right: 5px;

                margin-bottom: 5px;

                font-family: helvetica;

                font-size: 13px;

            }

        .tagsinput span.tag a {

            font-weight: bold;

            color: #82ad2b;

            text-decoration: none;

            font-size: 11px;

        }

        .tagsinput input {

            width: 80px;

            margin: 0px;

            font-family: helvetica;

            font-size: 13px;

            border: 1px solid transparent;

            padding: 5px;

            background: transparent;

            color: #000;

            outline: 0px;

            margin-right: 5px;

            margin-bottom: 5px;

        }

        .tagsinput div {

            display: block;

            float: left;

        }

        .tags_clear {

            clear: both;

            width: 100%;

            height: 0px;

        }

        .not_valid {

            background: #FBD8DB !important;

            color: #90111A !important;

        }

        .form {

            font-size: 14px;

            color: #333333;

            border-width: 1px;

            border-color: #ddd;

            margin-top: 30px;

            border-collapse: collapse;

        }

            .form th {

                border-width: 1px;

                padding: 10px 10px;

                border-style: solid;

                border-color: #ddd;

                color: #333;

                background-color: #eaeaea;

            }

    </style>

</head>

<body>

    <table class="table" id="content1">

        <tr>

            <td class='td_Num' style='width:80px;'>

                序号

            </td>

            <td class='td_Item'>

                规格名称

            </td>

            <td class='td_Item'>

                规格值

            </td>

        </tr>

    </table>

    <a href="#" onclick="add_line();" class="btn btn-primary dropdown-text">添加</a>

<input type="hidden" value="" id="nametags">

<input type="hidden" value="" id="valuetags">

    <table id="content" class="table">

        <tr>

            <th >

                商品编码

            </th>

            <th>

                商品条码

            </th>

            <th>

                售价

            </th>

            <th>

                成本价

            </th>

            <th>

                重量

            </th>

        </tr>

    </table>

    <input type="button" value="生成数据" id="btnSubmit" onclick="SaveData()" class="btn btn-primary dropdown-text" />

<div id="datalist">

</div>

</body>

</html>

<script type="text/javascript">

    var currentStep = 0;

    var max_line_num = 0;

    //添加新记录

    function add_line() {

        max_line_num = $("#content1 tr:eq(1)").children("td").html();

        if (max_line_num == null) {

            max_line_num = 1;

        }

        else {

            max_line_num = parseInt(max_line_num);

            max_line_num += 1;

        }

        if ($("#content1 tr").length > 2) {

            alert("最多添加两个规格");

            return false;

        }

        $('#content1').append(

        "<tr id='line" + max_line_num + "'>" +

            "<td class='td_Num' >" + max_line_num + "</td>" +

            "<td class='td_Item' style='width:160px;'><input type='text'  onkeyup='keyupname(this);' class='form-control' value='规格" + max_line_num + "' data='" + max_line_num + "'></input></td>" +

            "<td class='td_Item'><input type='text' class='form-control' id='tags_" + max_line_num + "' data='规格" + max_line_num + "' ></td>" +

               "<td class='td_Oper'>" +

                "<span onclick='remove_line(this);'>删除</span> " +

            "</td>" +

        "</tr>");

        var textdata = $('#content1 tr:eq(' + max_line_num + ')').find("td:eq(1)").find("input").val();

        if(max_line_num==1){

          $("#content tr:eq(0)").prepend("<th datar='" + max_line_num + "'>" + textdata + "</th>");

         }else

         {

          $("#content tr:eq(0)").find("th:first").after("<th datar='" + max_line_num + "'>" + textdata + "</th>");

         }

        if (max_line_num < 2) {

            var firstTr = $("#content").find('tbody>tr:last');

            var row = $("<tr class='sku_table_tr'></tr>");

            var td = $("<td class='formValue' data='1'></td><td class='formValue'><input type='text' class='form-control' name='sku_Id' readonly='readonly' value='系统生成'></td><td class='formValue'><input type='text' class='form-control' name='sku_code' ></td><td class='formValue'><input type='text' class='form-control' name='sku_price' ></td><td class='formValue'><input type='text' class='form-control' name='sku_jinjia' ></td><td class='formValue'><input type='text' class='form-control' name='sku_weight' ></td>");

            row.append(td);

            $("#content").append(row);

        } else {

            for (var i = 1; i <$("#content tr").length; i++) {

             $("#content tr:eq("+i+")").find("td:first").after("<td class='formValue' data='2'></td>");

            };

        }

        $('#tags_' + max_line_num + '').tagsInput({

            width: 'auto'

        });

    }

    function keyupname(argument) {

        var name = $(argument).val();

        var olddata = $(argument).attr("data");

        $("#content tr:eq(0)").find("th").each(function () {

            if ($(this).attr("datar") == olddata) {

                $(this).html(name);

            }

        });

    }

        function remove_line(index) {

        if (index != null) {

            currentStep = $(index).parent().parent().find("td:eq(0)").html();

        }

        if (currentStep == 0) {

            alert('请选择一项!');

            return false;

        }

        if (confirm("确定要删除改记录吗？")) {

            $("#content1 tr").each(function () {

                var seq = parseInt($(this).children("td").html());

                if (seq == currentStep) { $(this).remove(); }

                if (seq > currentStep) { $(this).children("td").each(function (i) { if (i == 0) $(this).html(seq - 1); }); }

            });

            var thname=$(index).parent().parent().find("td:eq(1)").find("input").attr("data");

            if (currentStep == 1) {

            $("#content tr:first").find("th:eq(0)").remove();

        }

        else

        {

            $('#tags_1').tagsInput({

                width: 'auto',

                del:2

            });

        }

        if (currentStep == 2) {

            $("#content tr:first").find("th:eq(1)").remove();

        }

        else {

            $('#tags_2').tagsInput({

                width: 'auto',

                del:1

            });

        }

             $("tr[class='sku_table_tr']").find("td").each(function () {

                if(thname==$(this).attr("data")){ $(this).remove(); }

            });

        }

    }

    //保存数据

    function SaveData() {

          var alreadySetSkuVals = [];

        //获取设置的SKU属性值

        $("tr[class='sku_table_tr']").each(function () {

             var propvalids =$(this).find("input[type='text'][name='sku_Id']").parent().prev().prev().html()+","+$(this).find("input[type='text'][name='sku_Id']").parent().prev().prev().attr("data")+";"+$(this).find("input[type='text'][name='sku_Id']").parent().prev().html()+","+$(this).find("input[type='text'][name='sku_Id']").parent().prev().attr("data");//

             var propnames = $("#content tr:eq(0)").find("th:eq(0)").html()+","+$("#content tr:eq(0)").find("th:eq(0)").attr("datar")+";"+$("#content tr:eq(0)").find("th:eq(1)").html()+","+$("#content tr:eq(0)").find("th:eq(1)").attr("datar")

      $("#datalist").html(propvalids);

         });

    }

</script>

商品规格，自定义SKU类型的更多相关文章

Day08_商品规格管理
学于黑马和传智播客联合做的教学项目感谢黑马官网传智播客官网微信搜索"艺术行者",关注并回复关键词"乐优商城"获取视频和教程资料! b站在线视频 0.学习 ...
python --商品规格--表结构设计
商品规格表结构设计商品规格包括规格组合.规格项,规格项为规格组的成员. 规格组 |-规格项:规格值 |-规格项:规格值规格组 |-规格项:规格值 |-规格项:规格值同一类商品的规格相同. 方案一 ...
SpringBoot电商项目实战 — 商品的SPU/SKU实现
最近事情有点多,所以系列文章已停止好多天了.今天我们继续Springboot电商项目实战系列文章.到目前为止,整个项目的架构和基础服务已经全部实现,分布式锁也已经讲过了.那么,现在应该到数据库设计及代 ...
自定义委托类型 - .Net自带委托类型
委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递. 与其他的类不同,委托类具有一个签名,并且它只能对与其签名匹配的方法进行引用. 一.自定义委托类型 1.语法结构:访问修 ...
C：Wordpress自定义文章类型（图视频）
自定义文章类型,包括: 1:单独的"文章内容模板" 2:单独的"文章列表模板" 3:单独的"控制后台"(文章分类.添加文章) 创建自定义文章 ...
sharepoint2010问卷调查（3）-实现问卷的开始和结束时间（采用自定义字段类型）
接着上面的图片调查,sharepoint自带的问卷调查是没有开始和结束时间的.这个在项目过程不太实用.问卷一般有开始和结束时间的.因此需要自己动手开发一个自定义字段类型字段.如下图: 开发添加栏目会 ...
sharepoint2010问卷调查（2）-实现问卷的图片调查（采用自定义字段类型）
1. 首先建立个图片库上传图片并建立文件夹1和2,1下有1.1文件夹,2下2.1文件夹,2.1下有文件夹2.1.1. 在1文件夹下放如下图片: 2.建立自定义字段类型,如下图: 3.部署后建立栏目的 ...
Gradle学习系列之九——自定义Task类型
在本系列的上篇文章中,我们学习了多Project构建,在本篇文章中,我们将学到如何自定义Task类型. 请通过以下方式下载本系列文章的Github示例代码: git clone https://git ...
Unity3D ShaderLab 创建自定义高光类型
Unity3D ShaderLab 创建自定义高光类型在上一篇,我们认识了Unity基础的高光实现,本次主要是研究如何对Phong高光类型进行顶点操作,以及在表面着色器中使用Input结构体的新参数 ...

随机推荐

k-近邻法(kNN)
原理: 已知一个训练样本集(有标签),计算待测试样本与所有训练样本的距离. 按距离从小到大进行排序并取前 k 个,统计 k 个中出现次数最多的分类为分类结果. 优点:精度高,对异常值不敏感,无数据输入 ...
Spring中使用RedisTemplate操作Redis（spring-data-redis）
RedisTemplate如何检查一个key是否存在? return getRedisTemplate().hasKey(key); 由一个问题,复习了一下redis 抄自: https://www. ...
AES
ES算法之理论与编程结合篇 1 前言 AES是现在使用最多的对称密钥分组密码算法,在逆向的过程中经常碰到,这几天处于离职期,有点时间,于是乎想细细的来研究一下它的原理,也算是离职的一个纪念吧. 网上的 ...
《程序设计入门——C语言》翁恺老师第四周编程练习记录
1 奇偶个数(5分) 题目内容: 你的程序要读入一系列正整数数据,输入-1表示输入结束,-1本身不是输入的数据.程序输出读到的数据中的奇数和偶数的个数. 输入格式: 一系列正整数,整数的范围是(0,1 ...
js中new函数后带括号和不带括号的区别
用new创建构造函数的实例时,通常情况下new 的构造函数后面需要带括号(譬如:new Parent()). 有些情况下new的构造函数后带括号和不带括号的情况一致,譬如: function Pare ...
基于MAVEN使用IDEA创建dubbo入门项目图文教程
花了很长时间没有找到一个很详细的图文教程来学习dubbo入门框架,故记录下来. 一: 项目工程目录简单介绍项目目录结构: 二: 创建父工程具体操作步骤: 1,打开IDEA,按下面步骤来 File- ...
一面（3） react方面
1.react的声明周期 getDefaultProps() getInitialState() componentWillMount() 以后组件更新不调用, 只调用一次 ...
L1-064 估值一亿的AI核心代码
以上图片来自新浪微博. 本题要求你实现一个稍微更值钱一点的 AI 英文问答程序,规则是: 无论用户说什么,首先把对方说的话在一行中原样打印出来: 消除原文中多余空格:把相邻单词间的多个空格换成 1 个 ...
机器学习sklearn
sklearn相关模块导入 from sklearn.feature_extraction import DictVectorizer from sklearn.feature_extraction. ...
Exploit-Exercises nebule 旅行日志（六）
接着上次的路程继续在ubuntu下对漏洞的探索练习,这次是level05了先看下level05的问题描述: 从level05的描述上看,是/home/flag05目录的权限有漏洞,看来多半是又跟fl ...

商品规格，自定义SKU类型

商品规格，自定义SKU类型的更多相关文章

随机推荐

热门专题