首页 > 代码库 > 使用JS动态提交多行数据
使用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="http://www.mamicode.com/"> 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="http://www.mamicode.com/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="http://www.mamicode.com/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=http://www.mamicode.com/""+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=http://www.mamicode.com/""+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=http://www.mamicode.com/""+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:rowID179 };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 = http://www.mamicode.com/(rowID + 1).toString() ;256 }257 //删除指定行258 function DeleteSignRow(rowid){259 var signFrame = findObj("SignFrame",document);260 var signItem = findObj(rowid,document);261 262 //获取将要删除的行的Index263 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="http://www.mamicode.com/"/>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="http://www.mamicode.com/"/><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="http://www.mamicode.com/1" /> 338 <tr>339 <td colspan="7" class="td2">340 <!-- <input type="submit" name="baocun" id="baocun" value="http://www.mamicode.com/ 保存 "/> -->341 <!-- <button id="baocun">保存</button> -->342 <a href="http://www.mamicode.com/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从第一行获取的。
使用JS动态提交多行数据
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。