动态新增表单

<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=" 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=" 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));
            });

 

原文地址:https://www.cnblogs.com/person008/p/15587687.html