使用JS动态提交多行数据
先展示个效果图吧
下面是源代码
1 <%@ page language="java" import="java.util.*,entity.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 12 <title>My JSP 'NewEquipmentEnter.jsp' starting page</title> 13 14 <meta http-equiv="pragma" content="no-cache"> 15 <meta http-equiv="cache-control" content="no-cache"> 16 <meta http-equiv="expires" content="0"> 17 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 18 <meta http-equiv="description" content="This is my page"> 19 <!-- 20 <link rel="stylesheet" type="text/css" href="styles.css"> 21 --> 22 <style type="text/css"> 23 hr{ 24 width:1000px; 25 } 26 .header{ 27 text-align:center; 28 font-size:20px; 29 font-weight:bold; 30 font-family:"微软雅黑" 31 } 32 .errorInfo{ 33 width:1000px; 34 margin:0 auto; 35 color:red; 36 } 37 .operator{ 38 width:1000px; 39 margin:0 auto; 40 text-align:right; 41 font-size:13px 42 } 43 .biaoti{ 44 margin:auto; 45 padding-top:30px; 46 width:960px; 47 height:50px; 48 color:#000; 49 font-size:17px; 50 font-weight:bold; 51 text-align:center; 52 } 53 54 .table{ 55 margin:auto; 56 width:900px; 57 border-collapse:collapse; 58 } 59 60 .td1{ 61 border:1px solid #B3DBF9; 62 width:100px; 63 height:25px; 64 background-color:#F2F9FF; 65 color:#00356B; 66 font-size:13px; 67 font-weight:bold; 68 text-align:center;} 69 .td2{ 70 height:25px; 71 border:1px solid #B3DBF9; 72 font-size:11px; 73 color:#1572A1; 74 text-align:center; 75 } 76 .td3{ 77 height:25px; 78 border:1px solid #B3DBF9; 79 background-color:#E3E9F1; 80 font-size:11px; 81 color:#1572A1; 82 text-align:center; 83 } 84 .table1{ 85 margin:auto; 86 width:900px; 87 border-collapse:collapse; 88 height:25px; 89 border:1px solid #B3DBF9; 90 background-color:#E3E9F1; 91 font-size:11px; 92 color:#1572A1; 93 text-align:center; 94 } 95 .table1 td{ 96 height:25px; 97 border:1px solid #B3DBF9; 98 } 99 100 .select{ 101 font-size:10px;} 102 </style> 103 <script type="text/javascript" language="javascript" src="js/jquery.js"></script> 104 105 <script type="text/javascript" language="javascript"> 106 $(document).ready(function(){ 107 $.getJSON("servlet/RefreshEquipmentTypeServlet",null,function(data){ 108 var list=data.equipmentTypeList; 109 $.each(list,function(){ 110 $("#equipmentType0").append("<option value=\""+this.equipmentType+"\">"+decodeURI(this.equipmentTypeName)+"</option>"); 111 }); 112 }); 113 $.getJSON("servlet/RefreshEquipmentKindServlet",null,function(data){ 114 var list=data.list; 115 $.each(list,function(){ 116 $("#equipmentKind0").append("<option value=\""+this.equipmentKind+"\">"+decodeURI(this.equipmentKindName)+"</option>"); 117 }); 118 }); 119 $.getJSON("servlet/RefreshLittleSupplierServlet",null,function(data){ 120 var list=data.list; 121 $.each(list,function(){ 122 $("#littleSupplier").append("<option value=\""+this.factoryId+"\">"+decodeURI(this.factoryName)+"</option>"); 123 }); 124 }); 125 126 127 var d=new Date(); 128 $("#todayDate").html(d.toLocaleDateString()); 129 130 }); 131 var arrayObj=new Array(); 132 133 $(document).ready(function(){ 134 $("#baocun").click(function(){ 135 if($("#jingbanren").val()==""){ 136 alert("经办人不能为空！"); 137 return false; 138 }else if($("#shebeiid0").val()==""){ 139 alert("设备编号不能为空！"); 140 return false; 141 }else if($("#shebeixinghao0").val()==""){ 142 alert("设备型号不能为空！"); 143 return false; 144 } 145 for(var i=0;i<=rowID;i++){ 146 if(document.getElementById("shebeiid"+i)==null){ 147 //continue; 148 arrayObj[i]=null; 149 }else{ 150 arrayObj[i]={ 151 equipmentId:document.getElementById("shebeiid"+i).value, 152 equipmentType:document.getElementById("equipmentType"+i).value, 153 equipmentKind:document.getElementById("equipmentKind"+i).value, 154 equipmentModel:document.getElementById("shebeixinghao"+i).value, 155 leaveFactoryNumber:document.getElementById("chuchangid"+i).value, 156 //remark:document.getElementById("beizhu"+i).value, 157 158 }; 159 if($("#shebeiid"+i).val()==""){ 160 alert("设备编号不能为空！"); 161 return false; 162 }else if($("#shebeixinghao"+i).val()==""){ 163 alert("设备型号不能为空！"); 164 return false; 165 } 166 } 167 } 168 169 170 var obj={ 171 supplierId:document.getElementById("littleSupplier").value, 172 buyPassPerson:document.getElementById("jingbanren").value, 173 operatorId:document.getElementById("operatorId").value, 174 equipmentState:"1", 175 //lastOutDate:null, 176 //relevanceEquipmentId:null, 177 arrayOb:arrayObj, 178 rowID:rowID 179 }; 180 181 <%-- $.get("<%=path%>/servlet/do_EnterServlet"); --%> 182 $.post("servlet/do_EnterServlet", obj); 183 }); 184 185 }); 186 187 188 189 190 function findObj(theObj, theDoc) 191 { 192 var p, i, foundObj; 193 if(!theDoc) theDoc = document; 194 if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) { 195 theDoc = parent.frames[theObj.substring(p+1)].document; 196 theObj = theObj.substring(0,p); } 197 if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; 198 for (i=0; !foundObj && i < theDoc.forms.length; i++) 199 foundObj = theDoc.forms[i][theObj]; 200 for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) 201 foundObj = findObj(theObj,theDoc.layers[i].document); 202 if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj); 203 return foundObj; 204 } 205 //添加一个参与人填写行 206 var rowID=0; 207 function AddSignRow(){ //读取最后一行的行号，存放在txtTRLastIndex文本框中 208 var txtTRLastIndex = findObj("txtTRLastIndex",document); 209 rowID = parseInt(txtTRLastIndex.value); 210 211 var signFrame = findObj("SignFrame",document); 212 //添加行 213 var newTR = signFrame.insertRow(signFrame.rows.length); 214 newTR.id = "SignItem" + rowID; 215 216 //添加列:序号 217 var newNameTD=newTR.insertCell(0); 218 //添加列内容 219 newNameTD.innerHTML = "<input name='shebeiid" + rowID + "' id='shebeiid" + rowID + "' type='text'/>"; 220 221 //添加列:姓名 222 var newNameTD=newTR.insertCell(1); 223 //添加列内容 224 newNameTD.innerHTML = "<select name='changshang"+rowID+"' class='select' id='equipmentType"+rowID+"'>"; 225 $("#equipmentType0>option").clone().prependTo("#equipmentType"+rowID+""); 226 227 //添加列:电子邮箱 228 var newEmailTD=newTR.insertCell(2); 229 //添加列内容 230 newEmailTD.innerHTML = "<input name='chuchangid" + rowID + "' id='chuchangid" + rowID + "' type='text'/>"; 231 232 //添加列:电话 233 var newTelTD=newTR.insertCell(3); 234 //添加列内容 235 newTelTD.innerHTML = "<select name='changshang"+rowID+"' class='select' id='equipmentKind"+rowID+"'>"; 236 $("#equipmentKind0>option").clone().prependTo("#equipmentKind"+rowID+""); 237 238 //添加列:手机 239 var newMobileTD=newTR.insertCell(4); 240 //添加列内容 241 newMobileTD.innerHTML = "<input name='shebeixinghao" + rowID + "' id='shebeixinghao" + rowID + "' type='text' />"; 242 243 //添加列:公司名 244 var newCompanyTD=newTR.insertCell(5); 245 //添加列内容 246 newCompanyTD.innerHTML = "<input name='beizhu" + rowID + "' id='beizhu" + rowID + "' type='text' />"; 247 248 249 //添加列:删除按钮 250 var newDeleteTD=newTR.insertCell(6); 251 //添加列内容 252 newDeleteTD.innerHTML = "<div align='center' style='font-size:11px;color:#1572A1;'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>"; 253 254 //将行号推进下一行 255 txtTRLastIndex.value = (rowID + 1).toString() ; 256 } 257 //删除指定行 258 function DeleteSignRow(rowid){ 259 var signFrame = findObj("SignFrame",document); 260 var signItem = findObj(rowid,document); 261 262 //获取将要删除的行的Index 263 var rowIndex = signItem.rowIndex; 264 265 //删除指定Index的行 266 signFrame.deleteRow(rowIndex); 267 268 } 269 270 </script> 271 </head> 272 273 <body> 274 <% 275 String loginName=request.getParameter("n"); 276 Operator op=(Operator)session.getAttribute("operatorInfo"); 277 if(loginName==null){ 278 response.sendRedirect("operatorLogin.jsp"); 279 }else if(op==null){ 280 response.sendRedirect("servlet/RefreshOperatorServlet?loginName="+loginName); 281 }else if(op!=null){ 282 %> 283 <div class="header">新购设备入库</div><br/> 284 <div class="errorInfo"></div> 285 <div class="operator">操作员：<%=op.getOperatorName()%></div> 286 <hr/> 287 <form> 288 <input type="hidden" name="operatorId" id="operatorId" value="<%=op.getOperatorId()%>"/> 289 <table class="table"> 290 <tr> 291 <td class="td1">设备厂商</td> 292 <td colspan="3" class="td2" style="text-align:left;"> 293 <select name="changshang" style=" width:200px;" class="select" id="littleSupplier"> 294 </select><span style="color:#F00"> *</span> 295 </td> 296 </tr> 297 <tr> 298 <td class="td1">经办人</td> 299 <td class="td2" width="200px" style="text-align:left;"> 300 <input type="text" name="jingbanren" id="jingbanren" value="<%=op.getOperatorName()%>"/><span style="color:#F00"> *</span></td> 301 <td class="td1">日期</td> 302 <td class="td2" id="todayDate"></td> 303 </tr> 304 </table> 305 306 <table class="table1" id="SignFrame"> 307 <tr> 308 <td class="td1">设备编号</td> 309 <td class="td1">设备种类</td> 310 <td class="td1">出厂编号</td> 311 <td class="td1">设备类型</td> 312 <td class="td1">设备型号</td> 313 <td class="td1">备注</td> 314 <td class="td1">操作</td> 315 </tr> 316 <tr> 317 <td class="td3"><input type="text" name="shebeiid0" id="shebeiid0"/></td> 318 <td class="td3"> 319 <select name="changshang" class="select" id="equipmentType0"> 320 </select> 321 </td> 322 <td class="td3"><input type="text" name="chuchangid0" id="chuchangid0"/></td> 323 <td class="td3"> 324 <select name="changshang" class="select" id="equipmentKind0"> 325 </select> 326 </td> 327 <td class="td3"><input type="text" name="shebeixinghao0" id="shebeixinghao0"/></td> 328 <td class="td3"><input type="text" name="beizhu0" id="beizhu0"/></td> 329 <td class="td3">删除</td> 330 </tr> 331 </table> 332 <table class="table"> 333 <tr> 334 <td class="td2" style="width:832px"> </td> 335 <td class="td2"><a href="javascript:;" onclick="AddSignRow()">添加</a></td> 336 </tr> 337 <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" /> 338 <tr> 339 <td colspan="7" class="td2"> 340 <!-- <input type="submit" name="baocun" id="baocun" value=" 保存 "/> --> 341 <!-- <button id="baocun">保存</button> --> 342 <a href="equipmentInfo.jsp" id="baocun">保存</a> 343 </td> 344 </tr> 345 </table> 346 </form> 347 <%} %> 348 </body> 349 </html>
点击添加按钮可以多加一行，删除可以删除相应的行。
点击保存按钮动态组装字符串，并提交给指定的servlet。
这里需要说明的是这个页面可以分为三种数据：
1、共同的数据，即动态行上面一样的信息；
2、不同的数据，即动态行里添加的数据；
3.几个隐藏信息：操作员ID、操作时间是在进入数据库是生成的当前时间。
另外，页面中的下拉列表都是通过JSON获取的，动态行里的数据时通过clone从第一行获取的。