jq点击增加一段html

2025-01-12 技术教程

<divclass="all"><divclass="widget-header"><h5>广告位明细(最多5条)</h5><div><h5id="newyz1">+增加</h5></div></div><divclass="one1"><divclass="contract-contracttype"><divclass="form-groupfield-contract-contracttyperequiredhas-success"><labelclass="col-sm-1control-labelno-padding-right"for="receivableamount[contractId]">广告位</label><divclass="col-lg-2"><inputtype="hidden"class="advertId"name="advertId[]"id="advertId"value=""><inputtype="hidden"class="advertname1"name="advertname1[]"id="advertname1"value=""><selectid="port"class="form-controlport"name="port[]"onchange="checkadvertname(this);"><?phpforeach($portas$key=>$value):?><optionvalue="<?=$value['key']?>"><?=$value['value']?></option><?phpendforeach;?></select></div><divclass="col-lg-2"><selectid="page"class="form-controlpage"name="page[]"onchange="checkadvertname(this);"><?phpforeach($pageas$key=>$value):?><optionvalue="<?=$value['key']?>"><?=$value['value']?></option><?phpendforeach;?></select></div><divclass="col-lg-2"><selectid="advertname"class="form-controladvertname"name="advertname[]"onchange="getadvert(this)"><optionvalue="0">请选择广告位</option></select></div></div></div><divclass="form-groupfield-applypay-paymenttime"><labelclass="col-sm-1control-labelno-padding-right"for="applypay-paymenttime">发布时间</label><divclass="col-sm-3col-lg-2"><divclass="input-group"><spanclass="input-group-addon"><iclass="icon-calendarbigger-110"></i></span><inputclass="form-controldate-pickerdatetime-picker3"id="projectStime"name="projectStime[]"data-date-format="dd-mm-yyyy"onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"type="text"><em>-</em></div></div><divclass="col-sm-3col-lg-2"><divclass="input-group"><spanclass="input-group-addon"><iclass="icon-calendarbigger-110"></i></span><inputclass="form-controldate-pickerdatetime-picker3"id="projectEtime"name="projectEtime[]"data-date-format="dd-mm-yyyy"onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"type="text"></div></div></div><divclass="form-groupfield-receivableamout-reasonrequired"><labelclass="col-sm-1control-labelno-padding-right"for="receivableamout-reason">备注说明</label><divclass="col-lg-5"><inputtype="text"id="receivableamout-reason"class="form-control"name="reason[]"maxlength="100"></div><divclass="col-lg-3"><divclass="help-block"></div></div></div></div><spanclass="form-group"id="xx"></span><divclass="form-groupfield-receivableamout-reasonrequired"><labelclass="col-lg-1control-labelno-padding-right"for="receivableamout-reason">上传附件</label><divclass="col-lg-11wdata1"><divclass="col-lg-3btnimg"><labelfor="uploadImg"class="btnbtn-primaryfileimg"><iclass="fa-plus-sign"></i><span>上传</span><inputclass="UploadImg"data="1"type="file"name="files[]"multiple></label></label></div></div></div></div>

$("#newyz1").bind('click',function(){_addnum++;varnum=_addnum;console.log(num);if($(".one1").length>4){layer.msg("最多5条数据");returnfalse;}varhtml='<divclass="one1">\n'+'<divclass="contract-contracttype">\n'+'<divclass="form-groupfield-contract-contracttyperequiredhas-success">\n'+'<inputtype="hidden"class="advertId"name="advertId[]"id="advertId"value="">\n'+'<inputtype="hidden"class="advertname1"name="advertname1[]"id="advertname1"value="">\n'+'<labelclass="col-sm-1control-labelno-padding-right"for="receivableamount[contractId]">广告位</label>\n'+'<ahref="javascript:void(0)"class="khnimus1"title=""id="newyz1"data-original-title=""><iclass="icon-trashbigger-130"></i></a>\n'+'<divclass="col-lg-2">\n'+'<selectid="port"class="form-controlport"name="port[]"onchange="checkadvertname(this);">\n';for(vari=0;i<ports.length;i++){html+='<optionvalue='+ports[i]['key']+'>'+ports[i]['value']+'</option>';}html+='</select>\n'+'</div>\n'+'<divclass="col-lg-2">\n'+'<selectid="page"class="form-controlpage"name="page[]"onchange="checkadvertname(this);">\n';for(vari=0;i<pages.length;i++){html+='<optionvalue='+pages[i]['key']+'>'+pages[i]['value']+'</option>';}html+='</select>\n'+'</select>\n'+'</div>\n'+'<divclass="col-lg-2">\n'+'<selectid="advertname"class="form-controladvertname"name="advertname[]"onchange="getadvert(this)">\n'+'<optionvalue="0">请选择广告位</option>\n'+'</select>\n'+'</div>\n'+'\n'+'</div>\n'+'</div>\n'+'<divclass="form-groupfield-applypay-paymenttime">\n'+'<labelclass="col-sm-1control-labelno-padding-right"for="applypay-paymenttime">发布时间</label>\n'+'<divclass="col-sm-3col-lg-2">\n'+'<divclass="input-group">\n'+'<spanclass="input-group-addon"><iclass="icon-calendarbigger-110"></i></span>\n'+'<inputclass="form-controldate-pickerdatetime-picker3"id="projectStime"name="projectStime[]"data-date-format="dd-mm-yyyy"onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})"type="text">\n'+'<em>-</em>\n'+'</div>\n'+'</div>\n'+'<divclass="col-sm-3col-lg-2">\n'+'<divclass="input-group">\n'+'<spanclass="input-group-addon"><iclass="icon-calendarbigger-110"></i></span>\n'+'<inputclass="form-controldate-pickerdatetime-picker3"id="projectEtime"name="projectEtime[]"data-date-format="dd-mm-yyyy"onfocus="WdatePicker({dateFmt:\'yyyy-MM-dd\'})"type="text">\n'+'</div>\n'+'</div>\n'+'</div>\n'+'<divclass="form-groupfield-receivableamout-reasonrequired">\n'+'<labelclass="col-sm-1control-labelno-padding-right"for="receivableamout-reason">备注说明</label>\n'+'<divclass="col-lg-5"><inputtype="text"id="receivableamout-reason"class="form-control"name="reason[]"maxlength="100"></div>\n'+'<divclass="col-lg-3">\n'+'<divclass="help-block"></div></div>\n'+'</div>\n'+//'<divclass="form-groupfield-receivableamout-reasonrequired">\n'+//'<labelclass="col-lg-1control-labelno-padding-right"for="receivableamout-reason">上传附件</label>\n'+//'<divclass="col-lg-11wdata'+num+'">\n'+//'<divclass="col-lg-3btnimg">\n'+//'<labelfor="uploadImg"class="btnbtn-primaryfileimg"><iclass="fa-plus-sign"></i>\n'+//'<span>上传</span>\n'+//'<inputclass="UploadImg"data="'+num+'"type="file"name="files[]"multiple></label>\n'+//'</label>\n'+//'</div>\n'+//'</div>\n'+//'</div>\n'+'</div>';$('#xx').append(html);//jq上传插件开始$(".UploadImg").fileupload({url:'http://imgapi.qq.com/upload/php/upload.php',sequentialUploads:true,formData:{"app":'brzy'},returnType:"json",acceptFiles:"application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/*,p_w_picpath/*,.pdf,.zip,.rar,.doc,.docx",dataType:'json',//上传完成后的执行逻辑done:function(e,data){varn=data.jqXHR.responseText;varan=JSON.parse(n);//console.log(an);layer.closeAll();//if(typeof(_clickBut)=='undefined'){//var_clickBut='';//}_clickBut=$(this).attr('data');//哪个按钮被点击了console.log($(this));callback(an.url);},//上传过程中的回调函数progressall:function(e,data){layer.load(0,{shade:false});}});//jq插件结束$(".khnimus1").live('click',function(){$(this).parents(".one1").remove();});});