-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsku.v1.0.0.html
172 lines (148 loc) · 4.13 KB
/
sku.v1.0.0.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js实现简单的sku效果</title>
<script src="../js/jquery.js"></script>
</head>
<body>
<p>当前版本还需要处理的问题：</p>
<pre>
1. 分开id和值
2. 表格rowspan的值需要计算
</pre>
<table width="300px" border="1" cellspacing="0">
<thead>
<tr>
<th>规格名称</th>
<th>规格值</th>
</tr>
</thead>
<tbody>
<tr class="yitiao">
<td class="itemname">颜色</td>
<td class="itemvalues"><input type="checkbox" name="spec_3" value="黑_33">黑<input type="checkbox" name="spec_3" value="白_34">白 </td>
</tr>
<tr class="yitiao">
<td class="itemname">尺寸</td>
<td class="itemvalues"><input type="checkbox" name="spec_6" value="大_45">大 <input type="checkbox" name="spec_6" value="小_46">小 </td>
</tr>
<tr class="yitiao">
<td class="itemname">内存</td>
<td class="itemvalues"><input type="checkbox" name="spec_11" value="16G_77">16G <input type="checkbox" name="spec_11" value="32G_78">32G <input type="checkbox" name="spec_11" value="128G_79">128G</td>
</tr>
</tbody>
</table>
<hr>
<div class="show"></div>
</body>
<script>
var domain = $(".show"); // 显示样式的区域
var all = $(".yitiao"); // tr
// 所有的多选框
var checkboxs = $(":checkbox");
// 每个多选框都绑定一个事件
checkboxs.each(function(inxde, item){
// 清空表格中多个内容
$(item).bind("change", function(){
// 存贮选中的值
var items = [];
$.each(all, function(){
// 存贮一条规格中的值
var item = [];
$(this).find(":checked").each(function(n, obj){
item[n] = $(obj).val();
});
// 如果当前规格下没有选中任何规格值则不添加
if(item.length != 0){
// 压入数组【这里只有规格值和规格值对应的id】
item['itemname'] = $(this).find(".itemname").html();
items.push(item);
}
});
// console.log(items);
// 对数组进行排序
// console.log(items.sort(function(a,b){return a.length - b.length;}))
var newItems = items.sort(function(a,b){return a.length - b.length;});
// console.log(newItems);
/*
<tr><th>xxx<th></tr> titles
<tr><td>000<td></tr>
*/
// 获取标题
var titles=[];
$.each(newItems, function(i, item){
// console.log(item.itemname)
titles[i] = item.itemname;
})
console.log(titles);
// 此时获取到的笛卡尔积数组和标题的数组是反着来的，所以在组件tables表格的时候要注意
var skuarr = combine(newItems);
console.log(skuarr);
if (titles.length > 0) {
createTable(titles, skuarr);
}
});
});
// 笛卡尔积
function combine(arr) {
var r = [];
(function f(t, a, n){
if (n == 0) return r.push(t);
for (var i = 0; i < a[n-1].length; i++) {
f(t.concat(a[n-1][i]), a, n-1)
}
})([], arr, arr.length)
return r;
}
// 创建表格
function createTable(titles, itemvalues) {
// var titles = ["颜色", "尺寸"];
$(".show").html("");
var table = $("<table width=600 border='1' cellspacing='0'></table>");
var show = $(".show");
table.appendTo(show);
var thead = $("<thead></thead>");
thead.appendTo(table)
var tr = $("<tr></tr>");
tr.appendTo(thead)
$.each(titles, function(i, item){
var th = $("<th></th>");
th.appendTo(tr)
th.html( item )
// console.log(item)
})
var th = $("<th>价格</th>");
th.appendTo(tr)
var th = $("<th>库存</th>");
th.appendTo(tr)
// 标题创建-end
// 内容创建-start
// var itemvalues = [
// ["小", "32G"],
// ["小", "64G"],
// ["小", "128G"],
// ];
var tbody = $("<tbody></tbody>");
tbody.appendTo(table)
$.each(itemvalues, function(i, item){
console.log(item)
console.log(typeof item)
var tr = $("<tr></tr>");
tr.appendTo(tbody)
$.each(item, function(j, val){
var td = $("<td></td>");
td.prependTo(tr)
td.html(val);
});
var td = $("<td><input type='text' name='price'></td>");
td.appendTo(tr)
var td = $("<td><input type='text' name='kucun'></td>");
td.appendTo(tr)
});
}
function clearTable()
{
}
</script>
</html>