簡單的后臺屬性添加代碼 <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">屬&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性:<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">屬&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性:<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">屬&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性:<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 庫哦,

總結

以上是生活随笔為你收集整理的后台多级属性添加的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。