zoukankan      html  css  js  c++  java
  • 动态新增表单

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

     

  • 相关阅读:
    Http学习(一)
    Android Studio 创建aar包与引用
    C语言模块化编译介绍
    程序结构和分支语句介绍
    数据类型、常量、变量、printf、scanf和运算符
    第一个C语言程序
    Xcode相关整理
    Java: IO 学习小结
    Java: RandomAccessFile
    Java: IO 字符流
  • 原文地址:https://www.cnblogs.com/person008/p/15587687.html
Copyright © 2011-2022 走看看