jQuery商品SKU表格特效代码下载


jQuery商品SKU表格特效代码下载
jQuery商品SKU表格特效代码下载以及商品SKU表格等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/layer.css">
<link rel="stylesheet" type="text/css" href="css/layui.css">

2. 引入JS

<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/Convert_Pinyin.js" type="text/javascript" charset="utf-8"></script>
<script src="js/layer.js" type="text/javascript" charset="utf-8"></script>

3. HTML代码

<div id="from" class="layui-form"  style="padding: 50px;">
	<div class="layui-form-item" style="display: flex;">
		<label class="layui-form-label" style="min-width: 80px;">规格</label>
		<div id="sku-wrap"></div>
		<div class="layui-input-inline" id="skuModel" style="display: none;border: 1px solid #E6E6E6;padding: 20px;margin-right: 0;min-width: 190px;">
			<input type="text" name="skuName" id="skuName"  class="layui-input" placeholder="请输入规格名" style="margin-bottom: 20px;" autocomplete="off">
			<button class="layui-btn layui-btn-normal" id="skuConfirm">确认</button>
			<button class="layui-btn layui-btn-danger" id="skuCancel">取消</button>
		</div>
		<div class="layui-input-inline" style="width: 64px;">
			<button class="layui-btn" id="skuAdd">添加</button>
		</div>
	</div>
	<div class="layui-form-item" style="clear: none;float: left">
		<label class="layui-form-label">规格值</label>
		<div id="sku-value-wrap"></div>
		<div class="layui-input-inline" id="skuValueModel" style="display: none;border: 1px solid #E6E6E6;padding: 20px;margin-right: 0;min-width: 190px;">
			<input type="text" name="skuValueName" id="skuValueName"  class="layui-input" placeholder="请输入规格值" style="margin-bottom: 20px;" autocomplete="off">
			<button class="layui-btn layui-btn-normal" id="skuValueConfirm">确认</button>
			<button class="layui-btn layui-btn-danger" id="skuValueCancel">取消</button>
		</div>
		<div class="layui-input-inline" style="width: 64px;">
			<button class="layui-btn" id="skuValueAdd">添加</button>
		</div>
	</div>
	<div class="layui-form-item" style="clear: none;float: left">
		<div class="layui-card-body" id="my-table">
			<table class="layui-table">
				<thead>
				<tr id="th">
				</tr>
				</thead>
				<tbody id="tbody">
				</tbody>
			</table>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function(){
		$('#sku-wrap').on('click', '.delete-icon', function (e) {
			console.log('delete-icon');
			event.stopPropagation();    //  阻止事件冒泡
			var skuName = $(this).prev().val();
			var fullName = pinyin.getFullChars(skuName);
			var objs = document.getElementsByName(fullName);
			console.log(objs);
			for(var i = 0;i<=objs.length;i++){
				objs[0].nextSibling.remove();
				objs[0].remove();
				console.log(i)
			}
			$(this).prev().remove();
			$(this).remove();
			event.stopPropagation();    //  阻止事件冒泡
			combination();
		});
		$('#sku-value-wrap').on('click', '.delete-icon', function (e) {
			$(this).prev().remove();
			$(this).remove();
			event.stopPropagation();    //  阻止事件冒泡
			combination();
		});
	});
	var firstTime = false;
	// 添加规格按钮
	$('#skuAdd').click(function () {
		var skeLen = $('#sku-wrap').children().length;
		if(skeLen==0){
			firstTime = true;
		}else {
			firstTime = false;
		}
		$(this).hide();
		$('#skuModel').show();
	});
	//  取消添加规格按钮
	$('#skuCancel').click(function () {
		$('#skuName').val('');
		$('#skuModel').hide();
		$('#skuAdd').show();
	});
	//  添加规格确认按钮
	var fullName = '';
	$('#skuConfirm').click(function () {
		var skuName = $('#skuName').val();
		if(skuName == ''){
			layer.msg('请输入规格名');
			return;
		}
		//获取全写拼音(调用js中方法)
		fullName = pinyin.getFullChars(skuName);
		//  判断规格是否已存在
		if(ifSkuExit(fullName)){
			layer.msg('此规格已存在!');
			return;
		}
		if(firstTime){
			$('#sku-wrap').append('<input type="button" class="sku sku-choose '+fullName+' " value="'+skuName+'"><span class="delete-icon"></span>');
		}else{
			$('#sku-wrap').append('<input type="button" class="sku '+fullName+' " value="'+skuName+'"><span class="delete-icon"></span>');
		}
		$('#skuName').val('');
		$('#skuModel').hide();
		$('#skuAdd').show();
	});
	//  切换sku
	$(document).on('click', '.sku', function(){
		console.log('sku');
		event.stopPropagation();    //  阻止事件冒泡
		$('.sku-value').hide();
		$('#sku-value-wrap .delete-icon').hide();
		if($(this).hasClass('sku-active')){
			$(this).removeClass('sku-active');
		}else {
			var obj = $('.sku-active');
			if (obj.length==2){
				layer.msg('只能选择两种规格');
				return;
			}
			$(this).addClass('sku-active');
		}
		$(this).addClass('sku-choose').siblings().removeClass('sku-choose');
		var skuName = $(this).val();
		fullName = pinyin.getFullChars(skuName);
		console.log(fullName);
		var objs = document.getElementsByName(fullName);
		for(var i =0;i<objs.length;i++){
			objs[i].style.display="block";
			objs[i].nextSibling.style.display="block";
		}
		combination();
	});
	// 添加规格值按钮
	$('#skuValueAdd').click(function () {
		var skeLen = $('#sku-wrap').children().length;
		if(skeLen==0){
			layer.msg('请添加规格');
			return;
		}
		var skeLen = $('#sku-wrap .sku-active').length;
		if(skeLen==0){
			layer.msg('请选择规格');
			return;
		}
		$(this).hide();
		$('#skuValueModel').show();
	});
	//  取消添加规格值按钮
	$('#skuValueCancel').click(function () {
		$('#skuValueName').val('');
		$('#skuValueModel').hide();
		$('#skuValueAdd').show();
	});
	//  添加规格值确认按钮
	$('#skuValueConfirm').click(function () {
		var skuName = $('.sku-choose').val();
		fullName = pinyin.getFullChars(skuName);
		var skuValueName = $('#skuValueName').val();
		if(skuValueName == ''){
			layer.msg('请输入规格名');
			return;
		}
		//获取全写拼音(调用js中方法)
		var fullValueName = pinyin.getFullChars(skuValueName);
		//  判断规格值是否已存在
		if(ifSkuExit(fullValueName)){
			layer.msg('此规格已存在!');
			return;
		}
		$('#sku-value-wrap').append('<input type="text" class="sku-value '+fullValueName+'" name="'+fullName+'" value="'+skuValueName+'" readonly><span class="delete-icon"></span>');
		$('#skuValueName').val('');
		$('#skuValueModel').hide();
		$('#skuValueAdd').show();
		combination();
		$('#my-table').show();
		combination();
	});
	function ifSkuExit(name){
		var len = document.getElementsByClassName(name).length;
		if(len==0){
			return false;
		}else {
			return true;
		}
	}
	// 组合数组
	function combination () {
		$('#tbody').html('');
		$('#th').html('');
		var arr = [];
		var array = [];
		var skuObjs = document.getElementsByClassName('sku-active');
		for (var i = 0;i<skuObjs.length;i++){
			var sku = skuObjs[i].value;
			var py = pinyin.getFullChars(sku);
			arr[i] = [];
			var skuValueObjs = document.getElementsByName(py);
			for(var j =0;j<skuValueObjs.length;j++){
				array[j] = [];
				array[j] = skuValueObjs[j].value;
				arr[i].push(array[j]);
			}
		}
		generateGroup(arr);
	}
	// 循环组合
	function generateGroup(arr) {
		var tablehtml = '';
		var skuObjs = document.getElementsByClassName('sku-active');
		for (var i = 0;i<skuObjs.length;i++){
			// var sku = skuObjs[i].value;
			// $('#th').append('<th>'+sku+'</th>');
			tablehtml += '<th>'+skuObjs[i].value+'</th>';
		}
		tablehtml += '<th>价格</th><th>库存</th>';
		$('#th').html(tablehtml);
			// $('#th').append('<th>价格</th><th>库存</th>');
		//初始化结果为第一个数组
		var result= arr[0];
		//从下标1开始遍历二维数组
		for(var i=1;i<arr.length;i++){
			//使用临时遍历替代结果数组长度(这样做是为了避免下面的循环陷入死循环)
			var size= result.length;
			//根据结果数组的长度进行循环次数,这个数组有多少个成员就要和下一个数组进行组合多少次
			for(var j=0;j<size;j++){
				//遍历要进行组合的数组
				for(var k=0;k<arr[i].length;k++){
					//把组合的字符串放入到结果数组最后一个成员中
					//这里使用下标0是因为当这个下标0组合完毕之后就没有用了,在下面我们要移除掉这个成员
					result.push(result[0]+","+arr[i][k]);
					// $('#tbody').append('<tr><td>'+result[0]+'</td><td>'+arr[i][k]+'</td><td><input/> </td></tr>')
				}
				//当第一个成员组合完毕,删除这第一个成员
				result.shift();
			}
		}
		//打印结果
		console.log(result);
		if(typeof(result)!="undefined"){
			console.log(result);
			for(var i=0;i<result.length;i++){
				var html = '';
				html += '<tr>';
				var arr = result[i].split(',');
				for (var j=0;j<arr.length;j++){
					html += '<td>'+arr[j]+'</td>'
				}
				html += '<td><input/></td><td><input/></td></tr>';
				$('#my-table').show();
				$("#tbody").append(html);
			}
		}else {
			$('#my-table').hide();
		}
	}
	// generateGroup([["红色","蓝色"],["X","XL"],["10m","20m"],["8g","16g"]]);
</script>

相关推荐

发表评论

相关文章