简单的后台属性添加代码
<style>
.step {
background: #fff;
padding: 15px 20px;
}
.step_title {
border-bottom: 1px solid #e4eaec;
line-height: 40px;
position: relative;
}
.step_content {
position: relative;
width: 100%;
padding: 20px 0;
}
.attr_item{
width: 100%;
height: auto;
overflow:hidden;
border-bottom:1px solid #e4eaec;
margin-top: 20px;
padding-bottom: 20px;
}
.add_attr{
font-size: 16px;
color: #31b4e1;
font-weight: 500;
margin-left: 80px;
cursor: pointer;
}
.attr_title{
font-size: 14px;
margin-left: 10px;
}
.attr_property{
font-size: 14px;
margin-left: 10px;
}
.attr_value{
font-size: 14px;
margin-left: 10px;
}
.attr{
font-size: 14px;
margin-left: 80px;
margin-top: 10px;
}
.step_item{
display: flex;
padding: 0px;
padding-top: 10px;
}
.add_property{
font-size: 14px;
padding-left: 20px;
color: #31b4e1;
cursor: pointer;
}
.del_attr{
font-size: 14px;
color: #d7000f;
margin-left: 20px;
cursor: pointer;
}
.del_property{
font-size: 14px;
color: #d7000f;
margin-left: 20px;
cursor: pointer;
}
</style>
<div class="step">
<div class="step_title"><i class="ui-step"></i><h3>商品规格属性</h3></div>
<div class="step_content relative" id="attr_content">
<div class="add_attr" id="add_attr">+添加规格属性</div>
<div class="attr_item">
<label class="attr">
规格属性:<input class="attr_title" type="text" name="attr_title[]" value="规格属性标题"></label><span class="add_property">+添加属性</span><span class="del_property">删除规格属性</span>
<div class="step_item">
<div class="">
<label class="attr">
属 性:<input class="attr_property" type="text" name="attr_property_0[]" value="第一个属性"> </label>
</div>
<div class="">
<label class="attr">
值:<input class="attr_value" type="text" name="attr_value_0[]" value="第一个属性"></label>
</div>
<div class="del_attr">删除</div>
</div>
</div>
</div>
</div>
<script src="http://www.donglongshangshi.com/plugins/ueditor/third-party/jquery-1.10.2.min.js"></script>
<script>
$(function(){
//添加规格属性标题
$("#add_attr").click(function(){
var length = $("#attr_content").find('.attr_item').length;
var html = '<div class="attr_item"><label class="attr">规格属性:<input class="attr_title" type="text" name="attr_title[]" value="规格属性标题"></label><span class="add_property">+添加属性</span><span class="del_property">删除规格属性</span><div class="step_item"><div class=""><label class="attr">属 性:<input class="attr_property" type="text" name="attr_property_'+length+'[]" value="请输入属性"> </label></div><div class=""><label class="attr">值:<input class="attr_value" type="text" name="attr_value_'+length+'[]" value="请输入值"></label></div><div class="del_attr">删除</div></div></div>';
$("#attr_content").append(html)
})
//添加属性与值
$("body").on('click','.add_property',function(){
var length = $("#attr_content").find('.attr_item').length -1;
var html = '<div class="step_item"><div class=""><label class="attr">属 性:<input class="attr_property" type="text" name="attr_property_'+length+'[]" value="请输入属性"> </label></div><div class=""><label class="attr"> 值:<input class="attr_value" type="text" name="attr_value_'+length+'[]" value="请输入值"></label></div><div class="del_attr">删除</div></div>';
$(this).parent().append(html);
})
//删除规格属性
$('body').on('click','.del_property',function(){
$(this).parent().remove();
})
//删除属性
$('body').on('click','.del_attr',function(){
$(this).parent().remove();
})
})
</script>
效果图
需要自行引入jquery 库哦,