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即可轻松添加项目及删除项目