商品规格表格生成

[Mr__Qiin]

百度查了下，没有现成的商品规格表生成的，就是类似淘宝的，添加商品规格，再添加子级参数，然后生成表格。自己写了个简单的，在thinkcmf做的，分享下，还请指教。
核心代码是js里面第95行到第107行的判断。
第一列规格项，取值：（行数除以它需要占的rowspan数）作为下标，取第一个规格项的子级参数对应下标的输入框value；
最后一列规格项，取值：因为它永远都是占1，就单独处理，存一个下标（只是当时写的时候想用数组存所有规格项的下标的，但是后来没用上，就还是暂时保留着了），超过最后一列的子级参数个数的时候，恢复下标为0，重新循环；
其他（第二列到倒数第二列）：用当前循环到的行数除以当前列需要占的rowspan数，这个值一定为整数，因为行数就是通过它乘出来的。。所以那个parseInt也是没必要的。。拿到这个数值以后再和当前列的子级参数个数取整就是当前循环到了当前列的下标，获取对应输入框value；
大致就是这么个逻辑，因为开发习惯可能不同，或许需要想一段时间才能理顺。。不知道有没有说明白，自己想了挺久的。。主要也是想记录一下，如果有人有优化的办法，还请留言。。互相学习。。





代码如下

<div class="control-group">
	<label class="control-label"> </label>
	<div class="controls">
		<button id="add_lv1" class="btn btn-primary" type="button">添加规格项</button>
		<button id="update_table" class="btn btn-success" type="button">刷新规格项目表</button>
	</div>
</div>
<div id="lv_table_con" class="control-group" style="display: none;">
	<label class="control-label">规格项目表</label>
	<div class="controls">
		<div id="lv_table"></div>
	</div>
</div>

<script type="text/javascript">
	var lv1HTML = '';
	lv1HTML += '<div class="control-group lv1">';
	lv1HTML += '	<label class="control-label">规格名称</label>';
	lv1HTML += '	<div class="controls">';
	lv1HTML += '		<input type="text" name="lv1" placeholder="规格名称" />';
	lv1HTML += '		<button class="btn btn-primary add_lv2" type="button">添加参数</button>';
	lv1HTML += '		<button class="btn btn-danger remove_lv1" type="button">删除规格</button>';
	lv1HTML += '	</div>';
	lv1HTML += '	<div class="controls lv2s">';
	lv1HTML += '	</div>';
	lv1HTML += '</div>';
	
	var lv2HTML = '';
	lv2HTML += '<div style="margin-top: 5px;">';
	lv2HTML += '	<input type="text" name="lv2" placeholder="参数名称" />';
	lv2HTML += '	<button class="btn btn-danger remove_lv2" type="button">删除参数</button>';
	lv2HTML += '</div>';
	
	function isPositiveNum(s) {
		var re = /^[0-9]*[1-9][0-9]*$/;
		return re.test(s);
	}
	
	$(document).ready(function() {
		$('#add_lv1').on('click', function() {
			var last = $('.control-group.lv1:last');
			if (!last || last.length == 0) {
				$(this).parents('.control-group').eq(0).after(lv1HTML);
			} else {
				last.after(lv1HTML);
			}
		});
		$(document).on('click', '.remove_lv1', function() {
			$(this).parents('.lv1').remove();
		});
		$(document).on('click', '.add_lv2', function() {
			$(this).parents('.lv1').find('.lv2s').append(lv2HTML);
		});
		$(document).on('click', '.remove_lv2', function() {
			$(this).parent().remove();
		});
		$('#update_table').on('click', function() {
			var lv1Arr = $('input[name="lv1"]');
			if (!lv1Arr || lv1Arr.length == 0) {
				$('#lv_table_con').hide();
				$('#lv_table').html('');
				return;
			}
			for (var i = 0; i < lv1Arr.length; i++) {
				var lv2Arr = $(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]');
				if (!lv2Arr || lv2Arr.length == 0) {
					alert('请先删除无参数的规格项！');
					return;
				}
			}
			
			var tableHTML = '';
			tableHTML += '<table class="table table-bordered">';
			tableHTML += '	<thead>';
			tableHTML += '		<tr>';
			for (var i = 0; i < lv1Arr.length; i++) {
				tableHTML += '			<th width="50">' + $(lv1Arr[i]).val() + '</th>';
			}
			tableHTML += '			<th width="20">现价</th>';
			tableHTML += '			<th width="20">原价</th>';
			tableHTML += '		</tr>';
			tableHTML += '	</thead>';
			tableHTML += '	<tbody>';
			
			var numsArr = new Array();
			var idxArr = new Array();
			for (var i = 0; i < lv1Arr.length; i++) {
				numsArr.push($(lv1Arr[i]).parents('.lv1').find('input[name="lv2"]').length);
				idxArr[i] = 0;
			}
			
			var len = 1;
			var rowsArr = new Array();
			for (var i = 0; i < numsArr.length; i++) {
				len = len * numsArr[i];
				
				var tmpnum = 1;
				for (var j = numsArr.length - 1; j > i; j--) {
					tmpnum = tmpnum * numsArr[j];
				}
				rowsArr.push(tmpnum);
			}
			
			for (var i = 0; i < len; i++) {
				tableHTML += '		<tr data-row="' + (i+1) + '">';
				
				var name = '';
				for (var j = 0; j < lv1Arr.length; j++) {
					var n = parseInt(i / rowsArr[j]);
					if (j == 0) {
					} else if (j == lv1Arr.length - 1) {
						n = idxArr[j];
						if (idxArr[j] + 1 >= numsArr[j]) {
							idxArr[j] = 0;
						} else {
							idxArr[j]++;
						}
					} else {
						var m = parseInt(i / rowsArr[j]);
						n = m % numsArr[j];
					}
					
					var text = $(lv1Arr[j]).parents('.lv1').find('input[name="lv2"]').eq(n).val();
					if (j != lv1Arr.length - 1) {
						name += text + '_';
					} else {
						name += text;
					}
					
					if (i % rowsArr[j] == 0) {
						tableHTML += '			<td width="50" rowspan="' + rowsArr[j] + '" data-rc="' + (i+1) + '_' + (j+1) + '">' + text + '</td>';
					}
				}
				
				tableHTML += '			<td width="20"><input type="text" name="' + name + '[price]" /></td>';
				tableHTML += '			<td width="20"><input type="text" name="' + name + '[original_price]" /></td>';
				tableHTML += '		</tr>';
			}
			tableHTML += '	</tbody>';
			tableHTML += '</table>';
			
			$('#lv_table_con').show();
			$('#lv_table').html(tableHTML);
		});
	});
</script>

[难得闲闲]

赞一个 很牛