淘宝后台添加颜色尺码动态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++分 ...
随机推荐
- 关于 Oracle 11g r2 Enterprise Manager (EM) 在windows环境无法启动的解决办法
正确的解决办法是在安装的时候使用emca正确安装 如果已经安装过Enterprise Manager: 请用是如下命令卸载后重装 emca -deconfig dbcontrol db emca -r ...
- IIS ARR(Application Request Route)与反向代理(Reverse Proxy)
为何要用反向代理? 这里说说我的场景, 我在服务器上假设了SVN(Visual SVN)用的端口是:8080, 而我想通过输入svn.niusys.com就可以访问我的SVN服务器,也就是要通过80端 ...
- Ubuntu 几个常用的更新命令
apt-cache search package 搜索包 apt-cache show package 获取包的相关信息,如说明.大小.版本等 sudo apt-get install package ...
- 恩智浦Freescale Cortex-A9 迅为IMX6开发板平台初体验
iTOP-i.MX6 开发板预装 Android4.4 系统,采用 9.7 寸(或者 7 寸或者 4.3 寸)IPS 屏 幕,至少 5 点以上触控,操作流畅,无论是高清视频.游戏等都会有上佳的表现,实 ...
- Android（java）学习笔记203：JNI之NDK开发步骤
1. NDK开发步骤(回忆一下HelloWorld案例): (1)创建工程 (2)定义native方法 (3)创建jni文件夹 (4)创建c源文件放到jni文件夹 (5)拷贝jni.h头文件到jni目 ...
- Python之三元运算、集合、函数
一.三元运算符 三元运算符就是在赋值变量的时候,可以直接加判断,然后赋值 格式:[on_true] if [expression] else [on_false] res = 值1 if 条件 els ...
- JVM参数说明介绍
1.JVM运行时数据区内存参数说明 2.JVM垃圾收集器参数总结 原文:https://blog.csdn.net/bluuusea/article/details/90697340 ======== ...
- SQL_Server_2008定期自动备份详细图解
SQL_Server_2008定期自动备份详细图解 设置自动数据库的定期备份计划. http://wenku.baidu.com/link?url=Tu ...
- 跳转QQ聊天窗口
1. 点击按钮跳转QQ聊天窗口,若不是好友,先加好友 <a href=" tencent://message/?uin=QQ号" target="_blank&qu ...
- linux 命令终端提示符显示-bash-4.2#解决方法
原地址:http://blog.csdn.net/liulihui1988/article/details/52796395 终端提示符显示的是-bash-4.2# 而不是root@主机名 + 路径的 ...