淘宝后台添加颜色尺码动态sku
废话不多说,直接上代码,用了vue,可直接copy运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://select2.github.io/vendor/js/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<style>
label{
padding-right:10px
}
</style>
</head>
<body>
<div id="root">
<div class="form-group">
<span>color:</span>
<label @change="labelChange(color,'color')" v-for="color in colors"><input type="checkbox">{{color}}</label>
</div>
<div class="form-group">
<span>size:</span>
<label @change="labelChange(size,'size')" v-for="size in sizes"><input type="checkbox">{{size}}</label>
</div>
<div class="form-group">
<span>capacity:</span>
<label @change="labelChange(capacity,'capacity')" v-for="capacity in capacitys"><input type="checkbox">{{capacity}}</label>
</div>
<div class="form-group">
<span>jixings:</span>
<label @change="labelChange(jixing,'jixing')" v-for="jixing in jixings"><input type="checkbox">{{jixing}}</label>
</div>
<div id="createTable"></div>
</div> <script type="text/javascript">
var app = new Vue({
el: '#root',
data: {
colors:['red','blue','black'],
sizes:['S','M','L'],
capacitys:['8G','16G','32G','64G'],
jixings:['thin','thick'],
columNum:0,
arrayColumn:[],
res:{},
result : []
},
methods:{
labelChange(v,title){
if( !this.res[title] ){
this.res[title] = [v]; }else{
if( indexofArr(this.res[title],v) ==-1 ){
this.res[title].push(v);
}else{
var index = indexofArr( this.res[title] , v ) ;
this.res[title].splice(index,1);
}
} var arr1 = [];
for(var title in this.res){
if( this.res[title].length > 0 ){
arr1.push(this.res[title])
}
}
this.result = doExchange(arr1);
this.createTable(); for(var i=0;i<4;i++){
this.mergeCell( $('table'),i);
}
},
createTable(){
if( $('#createTable').children().length == 0 ){
$('<table id="process" border="1" cellpadding="1" cellspacing="0"><thead><tr></tr></thead><tbody></tbody></table>').appendTo($('#createTable'));
}
var str = '';
for(var title in this.res){
str+= '<th>'+title+'</th>';
}
$('#createTable thead tr').html(str); var strBody = ''; for(var i=0;i<this.result.length ; i++){
var newArr = this.result[i].split(',');
console.log(newArr);
var str2='';
for(var j=0;j<newArr.length;j++){
str2 +='<td>'+newArr[j]+'</td>'
}
strBody +='<tr>'+str2+'</tr>';
}
$('#createTable tbody').html(strBody);
},
mergeCell($table,colIndex){
$table.data('col-content', ''); // 存放单元格内容
$table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
$table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象 $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
// 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
$('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();
// 最后一行的情况比较特殊一点
// 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
if (++index == $table.data('trNum'))
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
} else { // 上一行与当前行内容不同
// col-rowspan默认为1, 如果统计出的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);
}
}
});
}
}
})
/**检查 某个元素v 在数组中是否存在,存在返回1 不存在返回-1**/
function indexofArr(arr,v){
for(var i=0;i<arr.length;i++){
if(arr[i]==v){
return i //存在
}
}
return -1 //不存在
} function doExchange (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++;
}
}
return doExchange(newArray);
}
else {
return doubleArrays[0];
}
} </script>
</body>
</html>
淘宝后台添加颜色尺码动态sku的更多相关文章
- Zencart先生成订单后付款，类似淘宝后台修改订单价格
Zencart 使用 Paypal 付款,会出现漏单的情况,即 paypal 已经收到客户的付款,但是网站后台没有客户的订单.导致 paypal 漏单的原因大致会是当客户跳转到Paypal 网站付款完 ...
- npm和yarn的淘宝镜像添加
https://www.cnblogs.com/demonrain/p/8568122.html npm config set registry https://registry.npm.taobao ...
- 仿淘宝颜色属性选择展示代码（jQuery）
模仿淘宝商品选择颜色和尺寸的效果,即选择商品颜色和尺寸的时候,把选择的颜色和尺寸放到一个页面容器里面,不足之处,还望指教. <!DOCTYPE HTML> <html lang=&q ...
- YY淘宝商品数据库设计
http://www.cnblogs.com/mmmjiang13/archive/2010/11/04/1868609.html 前言 这几个月都在做一个通过淘宝API线下管理淘宝店的系统,学习了很 ...
- Python爬虫实战五之模拟登录淘宝并获取所有订单
经过多次尝试,模拟登录淘宝终于成功了,实在是不容易,淘宝的登录加密和验证太复杂了,煞费苦心,在此写出来和大家一起分享,希望大家支持. 温馨提示 更新时间,2016-02-01,现在淘宝换成了滑块验证了 ...
- Python 爬虫实战5 模拟登录淘宝并获取所有订单
经过多次尝试,模拟登录淘宝终于成功了,实在是不容易,淘宝的登录加密和验证太复杂了,煞费苦心,在此写出来和大家一起分享,希望大家支持. 本篇内容 python模拟登录淘宝网页 获取登录用户的所有订单详情 ...
- 妈妈再也不用担心我的移动端了：网易和淘宝的rem方案剖析
从博主学习前端一路过来的经历了解到,前端移动开发是大部分从PC端转战移动端的小伙伴都非常头疼的一个问题,这边博主就根据一篇自己看过的移动开发文章来剖析一下网易和淘宝的rem解决方案,希望能够帮助到一些 ...
- JS五星级评分效果(类似与淘宝打分效果)
今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示: 思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mous ...
- 【转】淘宝技术牛p博客整理
转自:http://blog.csdn.NET/zdp072/article/details/19574793 淘宝技术委员会是由淘宝技术部高级技术人员组成的一个组织,共分为Java分会.C/C++分 ...
随机推荐
- 番茄花园Ghost Win10系统X64位10041装机版2015年4月
转载:系统妈,系统下载地址:http://www.xitongma.com/windows10/2015-04-01/6639.html 番茄花园Ghost Win10系统X64位10041装机版20 ...
- 数据库系统概论(1)——Chap. 1 Introduction
数据库系统概论--Introduction 一.数据库的4个基本概念 数据(data):数据是数据库中存储的基本单位.我们把描述事物的符号记录称为数据.数据和关于数据的解释是不可分的,数据的含义称为数 ...
- Java EE 目标
在大三上学期学习了Java se,只是简单的学习了语法,而且没有及时的复习巩固,语法知识已经忘了许多.在这个新学期,又有了Java EE这门课,书上的内容是从没学习过的新知识,只是在网站上看到过像Sp ...
- 迅为IMX6核心板开发平台智能交通解决方案
智能交通系统它是将先进的信息技术.数据通讯传输技术.电子传感技术.控制技术及计算机技术等有效地集成运用于整个地面交通管理系统而建立的一种在大范围内.全方位发挥作用的,实时.准确.高效的综合交通运输管理 ...
- iTOP-4418/6818开发板支持双屏异显，双屏同显
iTOP-4418/6818开发板平台安卓系统下支持双屏异显,双屏同显,客户可按照不同用途,分别播放适合屏幕显示方式的内容 ,如HDMI屏幕和LCD屏幕显示不同内容, 一个屏幕播放广告,另一个屏幕运行 ...
- 迅为I.MX6DL开发板飞思卡尔Freescale Cortex A9 迅为-iMX6双核核心板
核心板参数 尺寸: 51mm*61mm CPU: Freescale Cortex-A9 双核精简版 i.MX6DL,主频 1.2 GHz 内存: 1GB DDR3 存储: 8GB EMMC 存储 E ...
- jQuery中Ajax事件beforesend及各参数含义1
jQuery中Ajax事件beforesend及各参数含义 转自:http://blog.sina.com.cn/s/blog_609f9fdd0100wprz.html Ajax会触发很多事件. 有 ...
- 安装exe4j出现jre不匹配问题
在安装exe4j 客户端,提示如下错误: 提示的错误信息大意如下:install4j安装时,在本系统中没有找到JRE(JavaRuntime Environment)(版本要求:最低1.5,最高1.6 ...
- python3+beautifulSoup4.6抓取某网站小说（二）基础功能设计
本章学习内容:1.网页编码还原读取2.功能设计 stuep1:网页编码还原读取 本次抓取对象: http://www.cuiweijuxs.com/jingpinxiaoshuo/ 按照第一篇的代码来 ...
- [HEOI2013]ALO
题目描述: 现在你拥有 n 颗宝石,每颗宝石有一个能量密度,记为 ai,这些宝石的能量 密度两两不同.现在你可以选取连续的一些宝石(必须多于一个)进行融合,设 为 ai, ai+1, …, aj,则融 ...