按钮动态添加删除input
Posted 理解龙儿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了按钮动态添加删除input相关的知识，希望对你有一定的参考价值。
症状:
也就是实现，添加按钮不断添加新的输入框，以及删除按钮。
处方代码：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/context/mytags.jsp"%> <!DOCTYPE html> <html> <head> <title>单位工程信息</title> <t:base type="jquery,easyui,tools,DatePicker"></t:base> <script type="text/javascript" src="plug-in/ckeditor_new/ckeditor.js"></script> <script type="text/javascript" src="plug-in/ckfinder/ckfinder.js"></script> <script type="text/javascript"> var index = 1; var contractNumIndex = new Array(); function addProject(){ contractNumIndex[index]=1; if(\'297e467253ea3fd80153ea79c0e60008\'==$(unitType).val()){ $("#put").attr("style","display:none;"); $("#luji").removeAttr("style"); $("#addProjectWork tr:last").after( "<tr >" +"<td class=\'value\' width=\'197\' colspan=\'8\'>" +"<input type=\'button\' value=\'删除\' onclick=\'delProject()\'>" +"</td>" +"</tr>" +"<tr>" +" <td align=\\"right\\"> " +" <label class=\\"Validform_label\\">分部工程类型<label style=\\"color:red\\">*</label>:</label> " +" </td> " +" <td class=\\"value\\"> " +"<select id=\\"workSubType1\\" name=\\"gsProjectWorkSubList["+index+"].workSubType\\"> " +" <c:forEach items=\'${listSt}\' var=\'o\' varStatus=\'stuts\'> " +" <option value=\\"${o.id}\\" <c:if test=\'${stuts.index eq 0 }\'> selected=\\"selected\\"</c:if>>${o.name}</option> " +" </c:forEach> " +" </select> " +" <span class=\\"Validform_checktip\\"></span> " +" <label class=\\"Validform_label\\" style=\\"display: none;\\">分部工程类型</label> " +" </td> " +" <td align=\\"right\\"> " +" <label class=\\"Validform_label\\">起始桩号<label style=\\"color:red\\">*</label>:</label> " +" </td> " +" <td class=\\"value\\"> " +" <input id=\\"workName\\" name=\\"gsProjectWorkSubList["+index+"].startStake\\" type=\\"text\\" style=\\"width: 150px\\" datatype=\\"*1-50\\" class=\\"inputxt\\" value=\'\'> " +" <span class=\\"Validform_checktip\\"></span> " +" <label class=\\"Validform_label\\" style=\\"display: none;\\">起始桩号</label> " +" </td> " +" <td align=\\"right\\"> " +" <label class=\\"Validform_label\\">起止桩号<label style=\\"color:red\\">*</label>:</label> " +" </td> " +" <td class=\\"value\\" colspan=\\"3\\"> " +" <input id=\\"workName\\" name=\\"gsProjectWorkSubList["+index+"].endStake\\" type=\\"text\\" style=\\"width: 150px\\" datatype=\\"*1-50\\" class=\\"inputxt\\" value=\'\'> " +" <span class=\\"Validform_checktip\\"></span> " +" <label class=\\"Validform_label\\" style=\\"display: none;\\">起止桩号</label> " +" </td> " +"</tr> " ); }else{ $("#luji").attr("style","display:none;"); $("#put").removeAttr("style"); $("#addProjectWork tr:last").after( "<tr >" +"<td class=\'value\' width=\'197\' colspan=\'8\'>" +"<input type=\'button\' value=\'删除\' onclick=\'delProject()\'>" +"</td>" +"</tr>" +"<tr>" +"<td align=\\"right\\">" +"<label class=\\"Validform_label\\">单位工程名称<label style=\\"color:red\\">*</label>:</label>" +"</td>" +"<td class=\\"value\\">" +" <input name=\\"gsProjectWorkList["+index+"].workName\\" type=\\"text\\" style=\\"width: 150px\\" datatype=\\"*1-50\\" class=\\"inputxt\\" value=\'\'>" +"<span class=\\"Validform_checktip\\"></span>" +"<label class=\\"Validform_label\\" style=\\"display: none;\\">单位工程名称</label>" +"</td>" +"<td align=\\"right\\">" +"<label class=\\"Validform_label\\">投资额<label style=\\"color:red\\">*</label>:</label>" +"</td>" +"<td class=\\"value\\">" +" <input name=\\"gsProjectWorkList["+index+"].investment\\" type=\\"text\\" style=\\"width: 150px\\" datatype=\\"*1-50\\" class=\\"inputxt\\" value=\'\'>" +"<span class=\\"Validform_checktip\\"></span>" +"<label class=\\"Validform_label\\" style=\\"display: none;\\">投资额</label>" +"</td>" +"<td align=\\"right\\">" +"<label class=\\"Validform_label\\">起始桩号<label style=\\"color:red\\">*</label>:</label>" +"</td>" +"<td class=\\"value\\">" +" <input name=\\"gsProjectWorkList["+index+"].startStake\\" type=\\"text\\" style=\\"width: 150px\\" datatype=\\"*1-50\\" class=\\"inputxt\\" value=\'\'>" +"<span class=\\"Validform_checktip\\"></span>" +"<label class=\\"Validform_label\\" style=\\"display: none;\\">起始桩号</label>" +"</td>" +"<td align=\\"right\\">" +"<label class=\\"Validform_label\\">起止桩号<label style=\\"color:red\\">*</label>:</label>" +"</td>" +"<td class=\\"value\\">" +"<input name=\\"gsProjectWorkList["+index+"].endStake\\" type=\\"text\\" style=\\"width: 150px\\" datatype=\\"*1-50\\" class=\\"inputxt\\" value=\'\'>" +"<span class=\\"Validform_checktip\\"></span>" +"<label class=\\"Validform_label\\" style=\\"display: none;\\">起止桩号</label>" +"</td>" +"</tr>" ); } index +=1; } function delProject(){ $("#addProjectWork tr:last").remove(); $("#addProjectWork tr:last").remove(); } $(document).ready(function(){ $(\'#tt\').tabs({ onSelect:function(title){ $(\'#tt .panel-body\').css(\'width\',\'auto\'); } }); $(".tabs-wrap").css(\'width\',\'100%\'); //投资额格式校验 $(\'#investment\').on(\'blur\',function(){ check(); }); }); //提交前校验投资额 function check(){ var val = $(\'#investment\').val(); var isOk = true; var message = \'\'; //空格校验 if(val.indexOf(\' \') != -1){ message = \'请填写数值\'; isOk = false; } else { //带小数点的位数校验 if(val.indexOf(\'.\') != -1){ if(val.substring(0,val.indexOf(".")).length > 7){ message = \'请规范填写投资额\'; isOk = false; } }else{ //不带小数点的位数校验 if(val.length > 7){ message = \'请规范填写投资额\'; isOk = false; } } } if(!isOk){ $(\'#Validform_msg\').find(\'.Validform_info\').html(message); $(\'#Validform_msg\').attr(\'style\',\'display: block; left: 220px; top: 220px;\'); $(\'#investment\').focus(); return false; } } $(function() { $("#builderjs及jquery实现动态的文件上传操作按钮的添加和删除片段内 Listview 中动态视图的 onClick 侦听器