动态新增表单
<div class="form-group group"> <label class="col-sm-3 control-label is-required">拼团价:</label> <div class="col-sm-6"> <div id="groupConf"> <div class="input-group groupConf" style="width: 543px;"> <span class="input-group-addon">拼团人数</span> <input type="text" class="form-control" name="number" placeholder="请输入拼团人数"/> <span class="input-group-addon">人</span><span class="input-group-addon">价格</span> <input type="text" class="form-control" name="price" placeholder="请输入拼团价格" /> <span class="input-group-addon">元</span> </div> </div> <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>设置几人团的价格,如2人团90,3人团80,可添加多种价格</span> <a class="fa fa-plus" onclick="addGroupConf()">新增</a> </div> </div>
js部分
function addGroupConf(){ var addform = '<div class="input-group groupConf groupFlag" style="margin-top: 10px">' + '<span class="input-group-addon">拼团人数</span>' + '<input type="text" class="form-control" name="number" placeholder="请输入拼团人数"/>' + '<span class="input-group-addon">人</span><span class="input-group-addon">价格</span>' + '<input type="text" class="form-control" name="price" placeholder="请输入拼团价格" />' + '<span class="input-group-addon">元</span><span class="input-group-addon"><a onclick="del(this)"><i class="fa fa-remove"></i>删除</a></span></div>'; $("#groupConf").append($(addform)); } function del(o) { $(o).parents(".groupFlag").remove(); }
数据提交
var groupConf = []; var divs = $(".groupConf"); $.each(divs, function (i, n) { var number = $(n).find("input[name='number']").val(); var price = $(n).find("input[name='price']").val(); var data = { "number": number, "price": price }; groupConf.push(data);//数组的push方法*!/ }); formData.append("groupConf", JSON.stringify(groupConf));
数据回显
<div class="form-group group"> <label class="col-sm-3 control-label is-required">拼团价:</label> <div class="col-sm-6"> <div id="groupConf"> </div> <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>设置几人团的价格,如2人团90,3人团80,可添加多种价格</span> <a class="fa fa-plus" onclick="addGroupConf()">新增</a> </div> </div>
js部分
var groupConf = eval([[${tab4Vo.groupConf}]]); var addform; $.each(groupConf,function(i,obj){ if (i == 0){ addform = '<div class="input-group groupConf groupFlag" style="width: 543px;margin-top: 10px">' + '<span class="input-group-addon">拼团人数</span>' + '<input type="text" class="form-control" name="number" placeholder="请输入拼团人数" value="' + obj.number + '"/><span class="input-group-addon">人</span><span class="input-group-addon">价格</span>' + '<input type="text" class="form-control" name="price" placeholder="请输入拼团价格" value="' + obj.price + '"/><span class="input-group-addon">元</span></div>'; } else { addform = '<div class="input-group groupConf groupFlag" style="margin-top: 10px">' + '<span class="input-group-addon">拼团人数</span>' + '<input type="text" class="form-control" name="number" placeholder="请输入拼团人数" value="' + obj.number + '"/><span class="input-group-addon">人</span><span class="input-group-addon">价格</span>' + '<input type="text" class="form-control" name="price" placeholder="请输入拼团价格" value="' + obj.price + '"/><span class="input-group-addon">元</span><span class="input-group-addon"><a onclick="del(this)"><i class="fa fa-remove"></i>删除</a></span></div>'; } $("#groupConf").append($(addform)); });