JS 動態增加刪除 input 輸入框
阿新 • • 發佈:2018-12-21
F12 console 可輸入下面程式碼,測試介面
$.post('InvstAccountManagement.do?op=getPdf',
{ amount: 1234 }, function(response) {
console.log(response);
});
頁面完成載入前如何debug
在需要斷點的地方加入一行
debugger;
如何動態新增刪除input框
<tr> <td class="noborder"></td> <td class="noborder"> <button type="button" id="add" class="add_btn">新增</button> <div id="containter" style="white-space: nowrap;"> <div>關鍵字名:<input type="text" class="ui-input-half" name="parameters[0].field" minLength="0" maxLength="256" dataType="Require" /> 中文含義:<input type="text" class="ui-input-half" name="parameters[0].value" minLength="0" maxLength="256" dataType="Require" /> <select id="unitType" name="parameters[0].unitType" > <option value ="num">數量</option> <option value ="time">時間</option> <option value ="percent">百分比</option> </select> <select id="unit" name="parameters[0].unit" > </select> <button type="button" id="del" class="operate_btn">刪除</button></div> </div> </td> </tr>
$(function(){ var inputsWrapper= $("#containter",'#<%=divID%>'); var FieldCount=1; var MaxInputs= 100; var x = inputsWrapper.length; // 顯示下拉 var appList = Jc().ajax({ type : 'json', url : 'systemmanagement/appaction.do?op=queryforsuggestion' }); $.each(appList.suggestions, function(i, obj) { $("#appSystemNo",'#<%=divID%>').append("<option value='"+ obj.data +"'>" + obj.value+ "</option>"); }); $("#add",'#<%=divID%>').click(function(e){ if (x <= MaxInputs) { FieldCount++; var index= FieldCount-1; $("#containter",'#<%=divID%>').append('<div>關鍵字名:<input type="text" class="ui-input-half" name="parameters['+ index +'].field" minLength="0" maxLength="256" dataType="Require"/> 中文含義:<input type="text" class="ui-input-half" name="parameters['+ index +'].value" minLength="0" maxLength="256" dataType="Require" /> <select id="unitType'+ FieldCount +'" name="parameters['+ index +'].unitType" ><option value ="num">數量</option><option value ="time">時間</option><option value ="percent">百分比</option></select> <select id="unit'+ FieldCount +'" name="parameters['+ index +'].unit" ></select> <button type="button" id="del'+ FieldCount +'"class="operate_btn">刪除</button></div>'); x++; // 為新加的del按鈕繫結刪除事件 $("#del"+FieldCount,'#<%=divID%>').click(function(e){ if (x > 1) { $(this).parent('div').remove(); x--; }else{ Jc().modal($('#<%= divID %>'), { type : 'warning', text : '只有一個關鍵字,不允許刪除' }); } return false; }); $("#unitType"+FieldCount,'#<%=divID%>').change(function(e){ var unittype= $('#unitType'+FieldCount +' option:selected','#<%=divID%>').val(); console.log("unittype:"+unittype); if(unittype == 'num'){ $("#unit"+FieldCount,'#<%=divID%>').empty(); $("#unit"+FieldCount,'#<%=divID%>').append("<option value='次'>次</option>"); $("#unit"+FieldCount,'#<%=divID%>').val("次"); }else if(unittype == 'time'){ $("#unit"+FieldCount,'#<%=divID%>').empty(); $("#unit"+FieldCount,'#<%=divID%>').append("<option value='minutes'>MINUTES</option>"); $("#unit"+FieldCount,'#<%=divID%>').append("<option value='hours'>HOURS</option>"); $("#unit"+FieldCount,'#<%=divID%>').append("<option value='seconds'>SECONDS</option>"); }else{ $("#unit"+FieldCount,'#<%=divID%>').empty(); $("#unit"+FieldCount,'#<%=divID%>').append("<option value='percent'>%</option>"); $("#unit"+FieldCount,'#<%=divID%>').val("percent"); } }); var unittype= $('#unitType'+FieldCount +' option:selected','#<%=divID%>').val(); if(unittype == 'num'){ $("#unit"+FieldCount,'#<%=divID%>').empty(); $("#unit"+FieldCount,'#<%=divID%>').append("<option value='次'>次</option>"); $("#unit"+FieldCount,'#<%=divID%>').val("次"); }else if(unittype == 'time'){ $("#unit"+FieldCount,'#<%=divID%>').empty(); $("#unit"+FieldCount,'#<%=divID%>').append("<option value='minutes'>MINUTES</option>"); $("#unit"+FieldCount,'#<%=divID%>').append("<option value='hours'>HOURS</option>"); $("#unit"+FieldCount,'#<%=divID%>').append("<option value='seconds'>SECONDS</option>"); }else{ $("#unit"+FieldCount,'#<%=divID%>').empty(); $("#unit"+FieldCount,'#<%=divID%>').append("<option value='percent'>%</option>"); $("#unit"+FieldCount,'#<%=divID%>').val("percent"); } } return false; });
效果如下: