商品规格，自定义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结构体的新参数 ...
随机推荐
- Docker私有仓库实例
C:\Users\think\.m2\settings.xml文件配置: <?xml version="1.0" encoding="UTF-8"?> ...
- JVM工具jstat使用说明
输入:jstat -help得到以下帮助信息 Usage: jstat --help|-options jstat -<option> [-t] [-h<lines>] < ...
- 浏览器与WEB服务器交互
问题:打开浏览器,在地址栏输入url到页面展现,整个过程发生了什么? 图示: 步骤: 1 用户输入网址,包括协议和域名. 2 浏览器先查找自身缓存有没有记录,没有的话再找操作系统缓存. 3 当浏览器在 ...
- Android studio报Error:(26, 13)-v7:27.错误的解决方法
1.报错图片 2.上图我画了红圈很明显就提示报错方向就是项目文件:build.gradle 3.解决方法如下 添加此方法到项目构建.gradle文件中: repositories { maven ...
- Delphi下 Winsock 函数
用于初始化Winsock[声明]int WSAStarup(WORD wVersionRequested,LPWSADATA lpWSAData);[参数]wVersionRequested - 要求 ...
- linux创建虚拟环境
linux提供的虚拟环境工具: virtualenv pipenv 1.安装python的虚拟环境 pip3 install -i https://pypi.tuna.tsinghua.edu.c ...
- iis 支持 .netcore 环境
1,安装 dotnet-win-x64 https://dotnet.github.io/2,安装 DotNetCore.1.0.4_1.1.1-WindowsHosting.exe https:/ ...
- CAT部署安装文档
多数软件都在/root/project/codebase/3rdpart redhat7用firewalld取代了iptables,遇到问题请添加redhat7关键字搜索,详情请参见Common ad ...
- Kubernetes 常用命令
文章摘自:https://blog.csdn.net/felix_yujing/article/details/51622132 1 查看类命令--- # 查看集群信息 kubectl cluster ...
- kaliLinux 安装 telnet
一.安装xinetd telnetd root@helm:~# apt-get install xinetd telnetd 二.查看服务是否启动状态 说明自启动了 如果没有需要启动xinetd,启动 ...