<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery商品SKU表格实例代码 - 更多源码【www.96flw.com】</title>
<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>
<link rel="stylesheet" type="text/css" href="css/layer.css">
<link rel="stylesheet" type="text/css" href="css/layui.css">
<style>
#sku-wrap, #sku-value-wrap{
display: flex;
align-items: start;
float: left;
}
#sku-wrap input,#sku-value-wrap input{
background: transparent;
width: 60px;
text-align: center;
border: 1px solid #E6E6E6;
margin-right: 20px;
border-radius: 2px;
padding: 10px 0;
}
#sku-wrap .sku-active{
border: 1px solid #1F9FFF;
color: #1F9FFF;
}
#sku-value-wrap input{
/*display: none;*/
}
#my-table{
display: none;
margin-left: 94px;
}
#my-table input{
border: 0;
}
#my-table td{
white-space: nowrap;
}
.layui-form-item{
width: 100%;
}
.delete-icon{
display: inline-block;
width: 12px;
height: 1px;
background: #C2C2C2;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
position: relative;
right: 33px;
top: 5px;
cursor: pointer;
z-index: 9999;
}
.delete-icon:after{
content: '';
display: block;
width: 12px;
height: 1px;
background: #C2C2C2;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
cursor: pointer;
position: relative;
z-index: 9999;
}
</style>
</head>
<body>
<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 {
jQuery商品SKU表格实例代码.zip
版权申诉
101 浏览量
2023-10-10
23:44:41
上传
评论
收藏 95KB ZIP 举报
jQuery商品SKU表格实例代码.zip （6个子文件） 
jiaoben7563 js 
jquery-1.8.3.min.js 91KB layer.js 22KB Convert_Pinyin.js 72KB css layui.css 59KB layer.css 14KB
index.html 10KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5852
最新资源
- C++开发基于ROS实现多差速无人车编队控制源码+使用说明+详细注释 (期末大作业）
- 项目将mzphp结合vuejs、vux、vue-resource做的todoList 代码量不多，重点在于演示 您也可当框架使用
- 基于STC12C5A60S2单片机+ds1302+LCD12864屏实现万年历源程序软件源码KEIL C51工程文件.zip
- 3层独栋别墅-10.20&11.70米- 施工图.dwg
- 简约风车壁纸自动采集小程序源码手机壁纸小程序源码
- UIBezierPath和CAShapeLayer绘图
- Scratch资源 sebcym-v1.4.6.zip
- STM32驱动0.96寸OLED代码
- 中小学教务工具箱v3.7.3
- SI4947ADY-T1-E3-VB一款SOP8封装2个P-Channel场效应MOS管
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
