商城商品多规格JQ前端代码实现

admin

1. <!DOCTYPE html>
   
2. <html lang="en">
   
3. <head>
   
4.     <meta charset="utf-8">
   
5.     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
   
6. </head>
   
7. <body>
   
8. <div class="control-group">
   
9.     <label class="control-label"> </label>
   
10.     <div class="controls">
    
11.         <button id="add_lv1" class="btn btn-primary" type="button">添加规格项</button>
    
12.         <button id="update_table" class="btn btn-success" type="button">刷新规格项目表</button>
    
13.     </div>
    
14. </div>
    
15. <div id="lv_table_con" class="control-group" style="display: none;">
    
16.     <label class="control-label">规格项目表</label>
    
17.     <div class="controls">
    
18.         <div id="lv_table">
    
19.             
    
20.         </div>
    
21.     </div>
    
22. </div>
    
23. <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    
24. <script>
    
25.     var lv1HTML = '<div class="control-group lv1">' +
    
26.         '<label class="control-label">规格名称</label>' +
    
27.         '<div class="controls">' +
    
28.         '<input type="text" name="lv1" placeholder="规格名称">' +
    
29.         '<button class="btn btn-primary add_lv2" type="button">添加参数</button>' +
    
30.         '<button class="btn btn-danger remove_lv1" type="button">删除规格</button>' +
    
31.         '</div>' +
    
32.         '<div class="controls lv2s"></div>' +
    
33.         '</div>';
    
34. 
    
35.     var lv2HTML = '<div style="margin-top: 5px;">' +
    
36.         '<input type="text" name="lv2" placeholder="参数名称">' +
    
37.         '<button class="btn btn-danger remove_lv2" type="button">删除参数</button>' +
    
38.         '</div>';
    
39. 
    
40.     $(document).ready(function() {
    
41.         $('#add_lv1').on('click', function() {
    
42.             var last = $('.control-group.lv1:last');
    
43.             if (!last || last.length == 0) {
    
44.                 $(this).parents('.control-group').eq(0).after(lv1HTML);
    
45.             } else {
    
46.                 last.after(lv1HTML);
    
47.             }
    
48.         });
    
49. 
    
50.         $(document).on('click', '.remove_lv1', function() {
    
51.             $(this).parents('.lv1').remove();
    
52.         });
    
53. 
    
54.         $(document).on('click', '.add_lv2', function() {
    
55.             $(this).parents('.lv1').find('.lv2s').append(lv2HTML);
    
56.         });
    
57. 
    
58.         $(document).on('click', '.remove_lv2', function() {
    
59.             $(this).parent().remove();
    
60.         });
    
61. 
    
62.         $('#update_table').on('click', function() {
    
63.             var lv1Arr = $('input[name="lv1"]');
    
64.             if (!lv1Arr || lv1Arr.length == 0) {
    
65.                 $('#lv_table_con').hide();
    
66.                 $('#lv_table').html('');
    
67.                 return;
    
68.             }
    
69.             for (var i = 0; i < lv1Arr.length; i++) {
    
70.                 var lv2Arr = $(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]');
    
71.                 if (!lv2Arr || lv2Arr.length == 0) {
    
72.                     alert('请先删除无参数的规格项！');
    
73.                     return;
    
74.                 }
    
75.             }
    
76. 
    
77.             var tableHTML = '';
    
78.             tableHTML += '<table class="table table-bordered">';
    
79.             tableHTML += '    <thead>';
    
80.             tableHTML += '        <tr>';
    
81.             for (var i = 0; i < lv1Arr.length; i++) {
    
82.                 tableHTML += '<th width="50">' + $(lv1Arr[i]).val() + '</th>';
    
83.             }
    
84.             tableHTML += '            <th width="20">现价</th>';
    
85.             tableHTML += '            <th width="20">原价</th>';
    
86.             tableHTML += '        </tr>';
    
87.             tableHTML += '    </thead>';
    
88.             tableHTML += '    <tbody>';
    
89. 
    
90.             var numsArr = new Array();
    
91.             var idxArr = new Array();
    
92.             //numsArr记录每个规格又多少个参数，并用idxarr记录规格数组下标 方便后边标记name
    
93.             for (var i = 0; i < lv1Arr.length; i++) {
    
94.                 numsArr.push($(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]').length);
    
95.                 idxArr[i] = 0;
    
96.             }
    
97. 
    
98.             var len = 1;
    
99.             var rowsArr = new Array();
    
100.             for (var i = 0; i < numsArr.length; i++) {
     
101.                 //len  记录参数总行数
     
102.                 len = len * numsArr[i];
     
103. 
     
104.                 var tmpnum = 1;
     
105.                 for (var j = numsArr.length - 1; j > i; j--) {
     
106.                     tmpnum = tmpnum * numsArr[j];
     
107.                 }
     
108.                 //当前规格每个参数所占行数
     
109.                 rowsArr.push(tmpnum);
     
110.             }
     
111. 
     
112.             for (var i = 0; i < len; i++) {
     
113.                 tableHTML += '        <tr data-row="' + (i+1) + '">';
     
114. 
     
115.                 var name = '';
     
116.                 for (var j = 0; j < lv1Arr.length; j++) {
     
117.                     var n = parseInt(i / rowsArr[j]);
     
118.                     if (j == 0) {
     
119.                     } else if (j == lv1Arr.length - 1) {
     
120.                         n = idxArr[j];
     
121.                         if (idxArr[j] + 1 >= numsArr[j]) {
     
122.                             idxArr[j] = 0;
     
123.                         } else {
     
124.                             idxArr[j]++;
     
125.                         }
     
126.                     } else {
     
127.                         var m = parseInt(i / rowsArr[j]);
     
128.                         n = m % numsArr[j];
     
129.                     }
     
130. 
     
131.                     var text = $(lv1Arr[j]).parents('.lv1').find('input[name="lv2"]').eq(n).val();
     
132.                     if (j != lv1Arr.length - 1) {
     
133.                         name += text + '_';
     
134.                     } else {
     
135.                         name += text;
     
136.                     }
     
137. 
     
138.                     if (i % rowsArr[j] == 0) {
     
139.                         tableHTML += '<td width="50" rowspan="' + rowsArr[j] + '" data-rc="' + (i+1) + '_' + (j+1) + '">' + text + '</td>';
     
140.                     }
     
141.                 }
     
142. 
     
143.                 tableHTML += '<td width="20"><input type="text" name="' + name + '[price]" /></td>';
     
144.                 tableHTML += '<td width="20"><input type="text" name="' + name + '[original_price]" /></td>';
     
145.                 tableHTML += '</tr>';
     
146.             }
     
147.             tableHTML += '</tbody>';
     
148.             tableHTML += '</table>';
     
149. 
     
150.             $('#lv_table_con').show();
     
151.             $('#lv_table').html(tableHTML);
     
152.         });
     
153.     });
     
154. </script>

复制代码