淘宝后台添加颜色尺码动态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++分 ...
随机推荐
- fedora安装gcc
查看gcc版本 gcc --version 命令行编译 g++ -std=c++11 -o main main.cpp 查看程序是否编译成功 echo $? 返回0表示编译成功 新版的Fedora(2 ...
- vue 发布build 本地设置 相对路径 两个地方 一个根目录用./ css文件里面用../../ 【也不好用，还是得手改】
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths a ...
- 三个层面学playbook(核心)
三个层面学playbook(核心) ansible-playbook是ansible工具中的核心,对比ad-hoc(ansible)命令,可以把playbook理解为一系列动作的组成,结果传递.判断等 ...
- C# html table转excel
1. protected void ebtDC_Click(object sender, EventArgs e) { string elxStr = "<table><t ...
- 第1节 yarn：13、yarn资源调度的介绍
Yarn资源调度 yarn集群的监控管理界面: http://192.168.52.100:8088/cluster jobHistoryServer查看界面: http://192.168.52.1 ...
- python中的next()以及iter()函数
我们首先要知道什么是可迭代的对象(可以用for循环的对象)Iterable: 一类:list,tuple,dict,set,str 二类:generator,包含生成器和带yield的generato ...
- 题解 P1967 货车运输
题目描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物,司机们想知道每辆车在不超过车辆限重的情况下,最多能 ...
- CSU1019: Simple Line Editor
1019: Simple Line Editor Submit Page Summary Time Limit: 1 Sec Memory Limit: 128 Mb Subm ...
- 微信小程序 设置计时器（setInterval）、清除计时器（clearInterval）
1.wxml代码 <!--index.wxml--> <view class="container"> <button type='primary' ...
- Python随笔day01
环境变量的配置: 配置Python的安装目录到path变量中,例如C:\Python37 标识符的命名规则: 变量名只能以数字,字母,下划线组成. 不能以数字开头,保留字不能被使用. 建议使用下划线分 ...