js create dynamic forms. DIV.

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<%@ taglib uri="erptag" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title> New raw materials inspection records  </title>
</head>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/popwindow.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/clickdilog.js"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/include/exestyle.css"/>
<script type="text/javascript">
function tabs(obj){
var tabli = obj.parentNode.parentNode.getElementsByTagName("li");
	for (i=0;i<tabli.length;i++){
		tabli[i].className = "";
		var contentId = tabli[i].id + "_content";
		document.getElementById(contentId).style.display = "none";
	}
	obj.parentNode.className = "selected";
	document.getElementById(obj.parentNode.id + "_content").style.display = "block";
}
window.onload=beforeLoad;
function beforeLoad(){
	$.ajax({
			type:"post",
			url:"beforeAddMaterial.do",
			dataType:"json",
			cache:"false",
			success:function(data){
				initValue(data);
				damAddSelect(data);

			}
	});
}

function initValue(obj){
	var tranCheckID=document.getElementById("transferCheckID");
		tranCheckID.value=obj.hashMapList[0];
		$("#reportID").val(obj.hashMapList[1]);
		$("#checkDate").val(new Date().toLocaleDateString());

}

function damAddSelect(obj){
	for(var i=2;i<obj.hashMapList.length;i++){
		document.getElementById("tcderptment").options.add(new Option(obj.hashMapList[i].TCDEPT,obj.hashMapList[i].TRANSFERCHECKID));
	}
}

</script>
<script type="text/javascript">
		/**
			 Create the main form
		*/
		function createWindow(){
			var flag=false;
			var maskDiv = document.createElement('div');
				maskDiv.className = "mask";
				maskDiv.id = "maskDiv";
				maskDiv.style.position = "absolute";
				maskDiv.style.width = 600 + "px";
				maskDiv.style.height = 300 + "px";
				maskDiv.style.background = "#ffffff";
				maskDiv.style.zIndex ="1";
				maskDiv.style.textAlign = "center";
				maskDiv.style.left = (document.body.offsetHeight/2)+"px";
				maskDiv.style.top = document.body.offsetWidth/20+"px";
				document.body.appendChild(maskDiv);
				createDIV(' Cited for banning single-  ','maskDivChild-1','maskDivChild-1','100%','8%','#9EC0E8','maskDiv');
				createDIV('','maskDivChild-2','maskDivChild-2','100%','82%','#ffffff','maskDiv');
				createDIV("<input type='button' value=' Confirm that the  '/><input type='button' value=' Shut down  '/>",
							'maskDivChild-3','maskDivChild-3','100%','10%','#CBCBCC','maskDiv');
				flag=true;
			return flag;
		}
		/**
			DIV Label  ( The main form of child tag  )
		*/
		function createDIV(html,className,id,width,height,backgroundcolor,parentDivId){
				var maskDivchild = document.createElement('div');
				maskDivchild.className = className;
				maskDivchild.id = id;

				maskDivchild.style.width = width ;
				maskDivchild.style.height = height ;
				maskDivchild.style.background = backgroundcolor;
				maskDivchild.innerHTML=html;
				document.getElementById(parentDivId).appendChild(maskDivchild);
		}

		/**
		 Braid
		*/
		function showMessage(){
			var ba = document.getElementById("bg");
			var h = document.body.offsetHeight > document.documentElement.offsetHeight ?
					document.body.offsetHeight : document.documentElement.offsetHeight;
					ba.style.height = h + "px";
					ba.style.display="";
			var flag=createWindow();
			ajaxLoadData();
			return flag;
		}
		/**
		 Create a table
		*/
		function createTable(parentDivId,arr){
			var table = document.createElement('table');
   			 table.setAttribute("id",'tableID');
   			 table.setAttribute("className","TableLine");// Set style
    		 table.setAttribute("width",'98%');
    		 table.setAttribute("cellpadding",'3');
   			 table.setAttribute("cellspacing",'0');   

 			var row = table.insertRow();
    		row.style.setAttribute("backgroundColor","#e0e0e0");   

   			 for (var i = 0; i < arr.length; i++) {
        		 var col = row.insertCell();
        		 if(i==0){
         		   col.setAttribute("width",'3%');
     		    }
      		   col.setAttribute("className","border:1px solid #9BC2E0;");
      		   col.setAttribute("align","center");
       		   col.style.fontSize="13px";
       		   col.style.fontWeight="Bold";;
       		   col.innerHTML = arr[i];
    			}
			document.getElementById(parentDivId).appendChild(table);
			return table;
		}
		/**
			 Add a row to a table
		*/
		function addRow(table,id,arr){   

 			 var row = table.insertRow();
  			 row.setAttribute("id",id);
  			 row.onclick=function (){selectFlagValue(this)};
  			 for(var i=0;i<arr.length;i++){
   					 var col = row.insertCell();
    				 col.innerHTML = arr[i];
      				  //col.innerText = arr[i];
    				 col.setAttribute("title",arr[i]);
 				 }
		}
		/**
			 Close button
		*/
		function closeWindow(){
			var ba = document.getElementById("bg");
			var mainDiv = document.getElementById("maskDiv");
			ba.style.display="none";
			document.body.removeChild(mainDiv);
		}

		var selectArr=new Array();
		/**
			 Confirm button
		*/

		function saveValue(){

			$("#STRANSFERCHECKID").val(selectArr[0]);
			$("#BOOKDATE").val(selectArr[1]);
			$("#BMSUNAME").val(selectArr[3]);
			$("#mnum").val(selectArr[4]);
			$("#RDMANAME").val(selectArr[5]);
			$("#SPECS").val(selectArr[6]);
			$("#BATCHCODE").val(selectArr[7]);
			$("#RDMAKNAME").val(selectArr[8]);
			$("#PRODUCEDATE").val(selectArr[9]);
			$("#TRUEAMOUNT").val(selectArr[10]);
			$("#UNIT").val(selectArr[11]);
			$("#REQUESTAMOUNT").val(selectArr[12]);
			$("#AUDITER").val(selectArr[13]);
			$("#STATUS").val(selectArr[14]);
			closeWindow();

		}
		/**
			 Load data from the back office server
		*/
		function ajaxLoadData(){
			$.ajax({
					type:"post",
					url:"loadTransferCheck.do",
					dataType:"json",
					cache:"false",
					success:function(data){
						insertTableData(data);
				}
			});
		}

		/**
			 Insert the data into a table
		*/
		function insertTableData(obj){
				var arr=new Array(' Submission number number  ',' Entering dates  ',' Vendor number  ',' Vendor name  ',' No.  ',' The name of raw materials  ',' Specifications  ',' Batch number  ',' Category  ',' Production date  ',' The total quantity  ',' Unit  ',' Inventory data  ',' Approvers  ',' Approval status  ');
				var tab=createTable('maskDivChild-2',arr);
				var arrdata;
				for(var i=0;i<obj.hashMapListTransferCheck.length;i++){
						arrdata=new Array();
						arrdata[0]=obj.hashMapListTransferCheck[i].TRANSFERCHECKID;
						arrdata[1]=obj.hashMapListTransferCheck[i].BOOKDATE;
						arrdata[2]=obj.hashMapListTransferCheck[i].CODE;
						arrdata[3]=obj.hashMapListTransferCheck[i].BMSUNAME;
						arrdata[4]=obj.hashMapListTransferCheck[i].MNUM;
						arrdata[5]=obj.hashMapListTransferCheck[i].RDMANAME;
						arrdata[6]=obj.hashMapListTransferCheck[i].SPECS;
						arrdata[7]=obj.hashMapListTransferCheck[i].BATCHCODE;
						arrdata[8]=obj.hashMapListTransferCheck[i].RDMAKNAME;
						arrdata[9]=obj.hashMapListTransferCheck[i].PRODUCEDATE;
						arrdata[10]=obj.hashMapListTransferCheck[i].TRUEAMOUNT;
						arrdata[11]=obj.hashMapListTransferCheck[i].UNIT;
						arrdata[12]=obj.hashMapListTransferCheck[i].REQUESTAMOUNT;
						arrdata[13]=obj.hashMapListTransferCheck[i].AUDITER;
						arrdata[14]=obj.hashMapListTransferCheck[i].STATUS;
						addRow(tab,'tabTr',arrdata);
				}

		}

		/**
			 Select the Table to color and remove data
		*/
		function selectFlagValue(obj){
				for(var i=1;i<obj.parentNode.rows.length;i++){
					if(obj.parentNode.rows[i].rowIndex==obj.rowIndex){
							obj.style.background='#96E0E2';
					}else{
						obj.parentNode.rows[i].style.background='white';
					}
				}
				// Select the Table row data in the data
				for(var j=0;j<obj.cells.length;j++){
					selectArr[j]=obj.cells[j].innerText;
				}

		}

	</script>
<style type="text/css">
.tab{
	width:100%;
	float:left;
	margin-left:0px;
}
.tab li{
	float:left;
	margin-right:3px;
	display:inline;
	width:100px;
	border:1px solid #ACA899;
	border-bottom:white;
	text-align:center;
	padding-top:1px;
	font-size:12pt;
}
.tabContent{
	display:none;
	border:1px solid #ACA899;
	height:100%;
}
div ul li{font-size:11pt;font-weight:bold;padding-top:3px;}
a{
	text-decoration : none ;
}
input{font-weight:bold;padding-top:2px;font-size:10pt;}

table tr td{font-size:9pt;padding-top:3px;color:#5B7CAE;}
</style>
<body>
	<form action="addmaterial.do" method="post">
		<div"width:100%;height:100%;">
			<ul>
				<li><a href="#"> Inspection records  </a></li>
				<li><a href="#"> Test report  </a></li>
			</ul>
			<div >
				<table"width:100%;" border="0">
					<tr>
						<input type="hidden" name="material.inQuantity"/>
						<input type="hidden" name="material.auditer"/>
						<input type="hidden" name="material.status"/>
						<input type="hidden" name="bookDate"/>
						<td align="right"> Inspection report No.  :</td>
						<td><input type="text" name="material.materialCheckID"/></td>
						<td align="right"> No.  :</td>
						<td><input type="text"  /></td>
						<td align="right"> The name of raw materials  :</td>
						<td><input type="text"  /></td>
					</tr>
					<tr>
						<td align="right"> Specifications  :</td>
						<td><input type="text"  /></td>
						<td align="right"> Batch number  :</td>
						<td><input type="text" name="material.lotNumber" /></td>
						<td align="right"> Materials category  :</td>
						<td><input type="text"  /></td>
					</tr>
					<tr>
						<td align="right"> Production date  :</td>
						<td><input type="text" name="manufactureDate" /></td>
						<td align="right"> Vendor  :</td>
						<td><input type="text"  /></td>
						<td align="right"> The total quantity  :</td>
						<td><input type="text" name="material.quantity" /></td>
					</tr>
					<tr>
						<td align="right"> Unit  :</td>
						<td><input type="text"  /></td>
						<td align="right"> The number of sampling  :</td>
						<td><input type="text" name="material.sampledQuantity"/></td>
						<td align="right"> Qualified number  :</td>
						<td><input type="text" name="material.qualifiedQuantity"/></td>
					</tr>
					<tr>
						<td align="right"> The test results  :</td>
						<td>
							<c:resourceselect property="material.checkResult" resourceid="949021">
							</c:resourceselect>
						</td>
						<td align="right"> Inspection date  :</td>
						<td><input type="text" name="checkDate"  /></td>
						<td align="right"> Inspector  :</td>
						<td><input type="text" name="material.checker" /></td>
					</tr>
					<tr>
						<td align="right"> Production departments  :</td>
						<td><select name="material.deptId"></select></td>
						<td align="right"> Raw materials submission number number  :</td>
						<td><input type="text" name="material.transferCheckID"  /></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td> Test conditions  :</td>
						<td colspan="5">
							<textarea name="material.checkCondition""width:100%;height:60px;" rows="" cols=""></textarea>

						</td>

					</tr>
					<tr>
						<td> Note  :</td>
						<td colspan="5">
							<textarea name="material.memo""width:100%;height:60px;" rows="" cols=""></textarea>
						</td>

					</tr>

				</table>
			</div>
			<div>
				<table"width:100%;" border="0">
					<tr>
						<td align="right"> The test environment  ( Temperature  ):</td>
						<td align="left"><input type="text" name="material.temperature"/></td>
						<td align="right"> Report number  :</td>
						<td align="left"><input type="text"/></td>
					</tr>
					<tr>
						<td align="right"> The test environment  ( Humidity  ):</td>
						<td align="left"><input type="text" name="material.environment"/></td>
						<td align="right"> Testing standards  :</td>
						<td align="left"><input type="text" name="material.testStandard"/></td>
					</tr>
					<tr>
						<td colspan="4">
							<table"width:100%;" border="0">
								<tr>
									<td> Ordinal number  </td>
									<td> Test project  </td>
									<td> Unit  </td>
									<td> Testing standards  </td>
									<td> Inspection methods  </td>
									<td> The test results  </td>
									<td> The judgment  </td>
								</tr>
								<tr>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
									<td></td>
								</tr>
							</table>

						</td>
					</tr>
				</table>
			</div>
		</div>
		<div"width:100%;height:100%;">
		<center>
			<input type="button" value=" Unless the material is presented for single  "/>
			<input type="submit" value=" Save  "/>
			<input type="button" value=" Please review  "/>
			<input type="button" value=" Shut down  "/>
		</center>
		</div>
		<div"background:#cccccc;filter:alpha(opacity=40);opacity:0.7;width:100%;position:absolute;left:0px;top:0px;
						display:none;z-index:0;"></div>
	</form>
</body>
</html>

分类:AJAX 时间:2009-10-01 人气:542
分享到:
blog comments powered by Disqus

相关文章

  • javascript学习笔记(七)Ajax和Http状态码 2014-08-26

    这篇文章主要介绍了javascript中Ajax和Http状态码,非常的简单实用,有需要的朋友可以参考下 Ajax及其工作原理 AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里使用,并迅速风靡. AJAX是不能跨域的,如需跨域,可以使用document.domain='a.com':或者使用服务器代理,代理XMLHttpRequest文件 AJAX是基于现有的Internet标准,并且联合使用它们: XMLHttpRequest 对象 (异步的与服务器交换数

  • http content-type and file type of correspondence 2008-11-18

    Because reptiles do, so http head made some research, in particular content-type. 【2008-8】 1, http content-type and file type of correspondence ".*"=" application / octet-stream " ".001" = "Application/x-001" "

  • Common file http content-type header value in the (MIME type) 2010-06-17

    Source text: http://www.utoronto.ca/webdocs/HTMLdocs/Book/Book-3ed/appb/mimetype.html Description of Data Content Typical Filename Extensions MIME type / subtype Text and Text-Related Types HTML text data (RFC 1866) html htm text / html Plain text: d

  • servlet, page directives, meta three of the Content-Type of the differences and similarities 2009-03-25

    1. A prelude to the following servlet can display Chinese? public class SimpleServlet extends HttpServlet ( public void doGet (HttpServletRequest req, HttpServletResponse resp) throws ServletException, java.io.IOException ( resp.setContentType ( "tex

  • Content-type header in the types of 2010-04-22

    Content-type description: 'Hqx' -> 'application/mac-binhex40', 'Cpt' -> 'application / mac-compactpro', 'Doc' -> 'application / msword', 'Bin' -> 'application / octet-stream', 'Dms' -> 'application / octet-stream', 'Lha' -> 'application

  • nginx gzip duplicate MIME type "text / html" 2010-09-14

    Instruction [# Gzip gzip] [# Gzip_buffers gzip_buffers] [# Gzip_comp_level gzip_comp_level] [# Gzip_min_length gzip_min_length] [# Gzip_http_version gzip_http_version] [# Gzip_proxied gzip_proxied] [# Gzip_types gzip_types] After the upgrade to the l

  • Content-type 的说明 2013-12-06

    Content-type 的说明 <?php $mimetypes = array( 'ez' => 'application/andrew-inset', 'hqx' => 'application/mac-binhex40', 'cpt' => 'application/mac-compactpro', 'doc' => 'application/msword', 'bin' => 'application/octet-stream', 'dms' => 'a

  • php header Content-Type类型小结 2014-12-22

    php header Content-Type类型小结,很多情况下需要用到Content-Type类型. <?php $mimetypes = array( 'ez' => 'application/andrew-inset', 'hqx' => 'application/mac-binhex40', 'cpt' => 'application/mac-compactpro', 'doc' => 'application/msword', 'bin' => 'appli

  • Study notes: Javascript data type and value 2010-05-29

    JS There are three basic data types: numbers, text strings and Boolean values. In addition to two small data types also allows: null and undefined [is only one value of their respective]. In addition to basic data types, JS also supports complex data

  • drupal theme: Design of page layout according to content type 2010-09-08

    By the Evance on Monday, 2007-12-24 08:54 text published sources: Customising the full page layout and sections based on node type Translation: Evance | drupal theme: Design of page layout in accordance with the content type description: This article

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.412 (s). 12 q(s)