先展示个效果图吧
下面是源代码
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从第一行获取的。
时间： 2024-10-19 06:54:56