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

相关文章

  • HTML教程:INPUT type=text元素 | input type=text对象 2014-09-30

    INPUT type=text元素 | input type=text 创建一个单行的文本输入控件. 成员表 下面的表格列出了 input type=text 对象引出的成员.请单击左侧的标签来选择你想要查看的成员类型. 标签属性/属性 标签属性 属性 描述 ACCESSKEY accessKey 设置或获取对象的快捷键. ATOMICSELECTION 指定 元素 及其内容是否可以一不可见单位统一选择. AUTOCOMPLETE autocomplete 设置或获取对象的自动完成状态. BEG

  • javascript 进阶篇3 Ajax .JSON. Prototype介绍 2014-09-20

    javascript 进阶篇3 Ajax .JSON. Prototype介绍,学习js的朋友可以参考下 Ajax 这个词听了不少,但是其实并没有真的接触过,于是在这里稍微了解一下. Ajax技术的创新之处在于,改善了传统的"请求-等待-响应-刷新-返回数据"模式,在信息返回之前,用户可以继续自己的操作,当前页面不会因为请求而刷新.这样大大的提高了交互性. Ajax其实并不是一个技术,而是由许多技术组成的.最大的特色之一就是可以异步传输,实现多线程服务. Ajax的异步传输,依靠的是j

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

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

  • javascript 使用iframe模拟ajax的具体原理 2014-11-24

    今天看了ajaxUpload.js源码之后恍然大悟,其实在某些时候,对网络请求不太严格的条件下,比如不用设置http请求头,请求参数,完全可以使用 javascript+iframe来代替ajax请求,不同之处是ajax功能比较强大,可以设置同步,异步,状态解析,并且ajax本身是直接网络请求,javascript+iframe是间接的同步的,无法知道响应状态的web请求. 对于文件上传,如今在Html5+ajax level2+FileReader Api+formData可以实现,但兼容早期

  • 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

  • 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

  • 如何用正则取input type="text"中的value 2014-02-04

    1.如何通过正则取input type="text"中的value呢? 2.如何过滤掉input type="checkbox"的标签? 这样只能达到正则取input type="text"中的value可是不能过滤掉input type="checkbox"的标签! alert [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] alert [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 解决: aler

  • AAS 7.0下一个Error content type错误的处理 2012-03-09

    近日,合作伙伴在使用AAS 7.0的时候,碰到一个后台抛异常,前端没问题的现象:一点击应用中的"导出Excel",后台即抛出如下异常: 2011-12-07 09:55:06 错误 [apusic.web.response] Error content type: application/x-msdownload; java.lang.StringIndexOutOfBoundsException: String index out of range: 1 at java.lang.S

  • Javascript reference type - a few basic classes 2010-09-20

    (A) Object class Object class does not have much effect, but it is the basis for other classes, other classes are inheriting this class through to achieve. (B) Boolean class Boolean class is the basic type of reference type boolean. Generally used in

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

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

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

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