淘宝后台添加颜色尺码动态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++分 ...
随机推荐
- 从0开始搭建SQL Server 2012 AlwaysOn 第二篇（配置故障转移集群）
本篇主要讲配置Windows 故障转移集群及遇到的相关问题(坑),因为AlwaysOn是基于Windows的故障转移集群的 在讲解步骤之前需要了解一下故障转移集群仲裁配置 四种集群的仲裁配置: 1.多 ...
- 洛谷 P3371 【模板】单源最短路径(堆优化dijkstra)
题目描述 如题,给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 输入输出格式 输入格式: 第一行包含三个整数N.M.S,分别表示点的个数.有向边的个数.出发点的编号. 接下来M行每行包含三 ...
- 编写图形界面下的Java Swing程序，接受用户输入的两个数据为上下限，然后输出上、下限之间的所有素数。（结果部分每行显示10个数据）
这个代码我整体写的比较简单,读者可以简单参考一下,对人家题目要求略微修改了一下,多加了一个“置空”按钮.下图为我设计的界面 运行程序后的截图请看我后面的截图: package com.wangshil ...
- cookie存储位置
平时各位在做项目时多半时候都会用到客户端的cookie,可大家知道cookie是存储在哪里吗? 首先cookie失效分为2种: 1:设置过期时间失效(只要设置了过期时间cookie就会存储在硬盘里面) ...
- 第3节 mapreduce高级：10、11、分组求取topN
只要修改OrderReducer.java的reduce方法,修改为: int i = 0;for(NullWritable nullWritable:values){ if(i>=2) bre ...
- spring封装的RabbitMQ
spring这么牛逼的团队,封装了RabbitMQ,简化了RabbitMQ的使用,那肯定是要使用spring-rabbit了 一.简介 二.使用方法 1.消费者 public class Foo { ...
- [C#] 对List进行分组排序后输出
Student 类: public class Student { public int ID { get; set; } public string Name { get; set; } publi ...
- Bootstrap table的基础用法
一.官方文档 Bootstrap 中文网:http://www.bootcss.com/ Bootstrap Table 中文网 : http://bootstrap-table.wenzhixin. ...
- jquery的$().each,$.each的区别02
在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法.两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点. $().each,对于这个方法,在d ...
- C++ STL容器之 stack
STL 中的 stack 是一种容器适配器,而不是一种容器. 它是容器适配器是指,只要支持一系列方法的容器(empty, size, back, push_back, pop_back),都能作为st ...