js动态添加表单项目

html代码：

<div class=”form-group”>

             <label class=”col-xs-12 col-sm-2 col-md-2 control-label”></label>

                <div class=”col-sm-2 col-lg-3″>

                    <span style=”background-color: rgb(44, 112, 238);padding: 5px 10px;color: #fff;border-radius: 5px;height:34px;line-height:34px;” onclick=”addline()”>+添加一条行车线路</span>

                </div>

 </div>

 <div class=”linearea”>

 </div>

jquery代码：

var orihtm = ‘{if $id}{php echo json_encode($storeline);}{/if}’;

    if(orihtm){

        obj = JSON.parse(orihtm);

        if(obj.length>0){

            for (let index = 0; index < obj.length; index++) {

                const element = domhtm(index+1,obj[index].sn,obj[index].start,obj[index].end);

                $(“.linearea”).append(element);

            }

        }

    }

    function addline(){

        var linenum = $(“.linearea .form-group”).length+1;

        var htm = domhtm(linenum)

        $(“.linearea”).append(htm);

    }

    function delline(obj){

        $(obj).parent().remove();

        sortline();

    }

    function sortline(){

        $(“.linearea .form-group”).each(function(i){

            i=i+1;

            $(this).find(“.control-label”).html(“行车线路”+i);

        });

    }

    function domhtm(linenum,sn,start,end){

        sn = sn||”;

        start = start||”;

        end = end||”;

        var htm = ‘<div class=”form-group”>\

                    <label class=”col-xs-12 col-sm-2 col-md-2 control-label”>行车线路’+linenum+'</label>\

                    <span style=”color:#fff;background-color:rgb(44, 112, 238);padding:5px 10px;height:34px;line-height:34px;border-radius:5px;” onclick=”delline(this)”>删除</span>\

                    <div class=”col-sm-2 col-lg-3″  style=”width:200px;”>\

                        <input type=”text” name=”line[‘+(linenum-1)+’][sn]” class=”form-control”  placeholder=”线路编号” value=”‘+sn+'” /> \

                    </div>\

                    <div class=”col-sm-2 col-lg-3″  style=”width:200px;”>\

                        <input type=”text” name=”line[‘+(linenum-1)+’][start]” class=”form-control”  placeholder=”线路起点” value=”‘+start+'” /> \

                    </div>\

                    <div class=”col-sm-2″ style=”width:50px;height:34px;line-height:34px;”>\

                        到\

                    </div>\

                    <div class=”col-sm-2 col-lg-3″  style=”width:200px;”>\

                        <input type=”text” name=”line[‘+(linenum-1)+’][end]” class=”form-control”  placeholder=”线路终点” value=”‘+end+'” /> \

                    </div>\

                </div>’;

        return htm;

    }

引用jquery即可轻松添加项目及删除项目