动态新增表单
class="form-group group">class="col-sm-6">class="help-block m-b-none">class="fa fa-info-circle">设置几人团的价格,如2人团90,3人团80,可添加多种价格 class="fa fa-plus" onclick="addGroupConf()">新增class="input-group groupConf" style="width: 543px;"> class="input-group-addon">拼团人数 class="form-control" name="number" placeholder="请输入拼团人数"/> class="input-group-addon">人class="input-group-addon">价格 class="form-control" name="price" placeholder="请输入拼团价格" /> class="input-group-addon">元
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 = '' + '拼团人数' + '人价格' + '元'; } else { addform = ''; } $("#groupConf").append($(addform)); });