`
xiegangthrille
  • 浏览: 93703 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

js动态创建表格、DIV、遮照

JavaScriptCSSAjaxjsonjQuery 
阅读更多 
<%@ 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>新增原辅料检验记录</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">
		/**
			创建主窗体
		*/
		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('引送检单','maskDivChild-1','maskDivChild-1','100%','8%','#9EC0E8','maskDiv');
				createDIV('','maskDivChild-2','maskDivChild-2','100%','82%','#ffffff','maskDiv');
				createDIV("<input type='button' value='确认' onclick='saveValue()'/><input type='button' value='关闭' onclick='closeWindow()'/>",
							'maskDivChild-3','maskDivChild-3','100%','10%','#CBCBCC','maskDiv');
				flag=true;
			return flag;
		}
		/**
			DIV标签(主窗体的子标签)
		*/
		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);
		}

		/**
		屏蔽网
		*/
		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;		
		}
		/**
		创建表格
		*/
		function createTable(parentDivId,arr){
			var table = document.createElement('table');   
   			 table.setAttribute("id",'tableID');   
   			 table.setAttribute("className","TableLine");//设定样式   
    		 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;
		}
		/**
			向表格添加一行记录
		*/
		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]);   
 				 }   
		}  
		/**
			关闭按钮
		*/
		function closeWindow(){
			var ba = document.getElementById("bg");
			var mainDiv = document.getElementById("maskDiv");
			ba.style.display="none";
			document.body.removeChild(mainDiv);
		}
		
		var selectArr=new Array();
		/**
			确认按钮
		*/
		
		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();
		
		}
		/**
			从后台服务器加载数据
		*/
		function ajaxLoadData(){
			$.ajax({
					type:"post",
					url:"loadTransferCheck.do",
					dataType:"json",
					cache:"false",
					success:function(data){
						insertTableData(data);
				}
			});
		}
		
		/**
			将数据插入表格
		*/
		function insertTableData(obj){
				var arr=new Array('送检单号','入库日期','供应商编号','供应商名称','货号','原料名称','规格','批号','类别','生产日期','总数量','单位','入库数据','审批人','审批状态');
				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);
				}
				
		}
		
		/**
			选中Table变色并取出数据
		*/
		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';
					}
				}
				//将Table中选中的某行数据放入数据
				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 style="width:100%;height:100%;">
			<ul class="tab">
				<li id="checkRecord"><a href="#" onclick="tabs(this)">检验记录</a></li>
				<li id="checkReport"><a href="#" onclick="tabs(this)">检验报告</a></li>
			</ul>
			<div class="tabContent"  id="checkRecord_content" style="display:block;height:350px;">
				<table style="width:100%;" border="0">
					<tr>
						<input type="hidden" name="material.inQuantity" id="REQUESTAMOUNT"/>
						<input type="hidden" name="material.auditer" id="AUDITER"/>
						<input type="hidden" name="material.status" id="STATUS"/>
						<input type="hidden" name="bookDate" id="BOOKDATE"/>
						<td align="right">检验报告单号:</td>
						<td><input type="text" name="material.materialCheckID" id="transferCheckID"/></td>
						<td align="right">货号:</td>
						<td><input type="text"  id='mnum' style="background:#ECE9D8;" /></td>
						<td align="right">原料名称:</td>
						<td><input type="text"  id="RDMANAME" style="background:#ECE9D8;" /></td>
					</tr>
					<tr>
						<td align="right">规格:</td>
						<td><input type="text"  id="SPECS" style="background:#ECE9D8;" /></td>
						<td align="right">批号:</td>
						<td><input type="text" name="material.lotNumber" id="BATCHCODE" style="background:#ECE9D8;" /></td>
						<td align="right">物资类别:</td>
						<td><input type="text"  id="RDMAKNAME" style="background:#ECE9D8;" /></td>
					</tr>
					<tr>
						<td align="right">生产日期:</td>
						<td><input type="text" name="manufactureDate" id="PRODUCEDATE" style="background:#ECE9D8;" /></td>
						<td align="right">供应商:</td>
						<td><input type="text"  id="BMSUNAME" style="background:#ECE9D8;" /></td>
						<td align="right">总数量:</td>
						<td><input type="text" name="material.quantity" id="TRUEAMOUNT" style="background:#ECE9D8;" /></td>
					</tr>
					<tr>
						<td align="right">单位:</td>
						<td><input type="text"  id="UNIT" style="background:#ECE9D8;" /></td>
						<td align="right">抽样数量:</td>
						<td><input type="text" name="material.sampledQuantity"/></td>
						<td align="right">合格数量:</td>
						<td><input type="text" name="material.qualifiedQuantity"/></td>
					</tr>
					<tr>
						<td align="right">检验结果:</td>
						<td>
							<c:resourceselect property="material.checkResult" resourceid="949021">
							</c:resourceselect>
						</td>
						<td align="right">检验日期:</td>
						<td><input type="text" name="checkDate" id="checkDate"  style="background:#ECE9D8;" /></td>
						<td align="right">检验员:</td>
						<td><input type="text" name="material.checker" style="background:#ECE9D8;" /></td>
					</tr>
					<tr>
						<td align="right">制单部门:</td>
						<td><select name="material.deptId" style="width:80px;" id="tcderptment"></select></td>
						<td align="right">原料送检单号:</td>
						<td><input type="text" name="material.transferCheckID" id="STRANSFERCHECKID"  style="background:#ECE9D8;" /></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>检验情况:</td>
						<td colspan="5">
							<textarea name="material.checkCondition" style="width:100%;height:60px;" rows="" cols=""></textarea>
							
						</td>
						
					</tr>
					<tr>
						<td>备注:</td>
						<td colspan="5">
							<textarea name="material.memo" style="width:100%;height:60px;" rows="" cols=""></textarea>
						</td>
						
					</tr>
					
				</table>
			</div>
			<div class="tabContent" id="checkReport_content" style="display:none;height:350px;">
				<table style="width:100%;" border="0">
					<tr>
						<td align="right">测试环境(温度):</td>
						<td align="left"><input type="text" name="material.temperature"/></td>
						<td align="right">报告编号:</td>
						<td align="left"><input type="text" id="reportID"/></td>
					</tr>
					<tr>
						<td align="right">测试环境(湿度):</td>
						<td align="left"><input type="text" name="material.environment"/></td>
						<td align="right">检验标准:</td>
						<td align="left"><input type="text" name="material.testStandard"/></td>
					</tr>
					<tr>
						<td colspan="4">
							<table style="width:100%;" border="0">
								<tr>
									<td>序号</td>
									<td>检验项目</td>
									<td>单位</td>
									<td>检验标准</td>
									<td>检验方法</td>
									<td>检验结果</td>
									<td>判定</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 style="width:100%;height:100%;">
		<center>
			<input type="button" value="引原料送检单" onclick="showMessage()"/>
			<input type="submit" value="保存"/>
			<input type="button" value="请审"/>
			<input type="button" value="关闭"/>
		</center>
		</div>
		<div id="bg" style="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>

 

分享到：
| 免装Oracle客户端使用PL/SQL连接的方法
评论
1 楼 aiyust070 2011-05-18  
少几个js文件
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    动态创建删除表格

    要动态创建表格，我们可以使用jQuery的`append()`方法在页面上指定的元素后添加新的HTML代码。 1. **创建整个表格**： 假设我们有一个空的`div`元素用于放置表格，其ID为`tableContainer`。可以这样创建一个2行3列...

    动态创建表格标签

    在IT领域，动态创建表格标签是一项常见的编程任务，特别是在网页开发和用户界面设计中。这一技术使得开发者能够根据需要在运行时自动生成表格元素，如`&lt;table&gt;`、`&lt;tr&gt;`（表格行）、`&lt;td&gt;`（表格数据单元格）以及与...

    extjs动态生成表格,前台+后台

    6. 动态生成：通过JavaScript代码动态创建ColumnModel和Store，从而实现表格的动态生成。 通过理解和掌握这些知识点，开发者可以构建出高度灵活、响应式的前端表格应用，同时充分利用后端数据源提供动态内容。

    Jquery创建动态表格

    使用jQuery，我们可以动态创建表格元素。例如，创建一个带有表头的表格： ```javascript var table = $('&lt;table&gt;&lt;/table&gt;'); var thead = $('&lt;thead&gt;&lt;/thead&gt;'); var tr = $('&lt;tr&gt;&lt;/tr&gt;'); // 添加表头...

    js鼠标浮动显示div

    在JavaScript（JS）中，"鼠标浮动显示div"是一种常见的交互设计，通常用于创建提示框、下拉菜单或工具提示。这种技术的核心是利用事件监听器来捕捉鼠标的移动，并根据鼠标的移动来控制div元素的显示与隐藏。在本案例...

    Javascript动态创建表格及删除行列的方法

    在JavaScript中，动态创建表格和删除行列是常见的需求，尤其在网页交互和数据展示中。以下将详细讲解如何实现这些功能。 首先，我们来看如何动态创建表格。在HTML中，表格由`&lt;table&gt;`元素定义，包含`&lt;tr&gt;`（行）和`...

    JS动态增加删除表格行

    本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一个表格由`&lt;table&gt;`元素包含，其中包含`&lt;tr&gt;`（表格行）元素，每行内可以有多个`&lt;td&gt;`（表格数据单元格）或`...

    JQuery 动态生成DIV、Table并处理数据

    标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素，特别是DIV和Table，并且处理其中的数据。这在Web开发中非常常见，尤其是在构建交互式用户界面时。下面将详细阐述这...

    div+css制作表格

    - **动态添加/删除行**：通过JavaScript实现动态添加或删除行。 - **单元格合并**：允许用户选择多个相邻的单元格并进行合并。 - **数据验证**：例如限制输入类型、长度等。 - **自动填充**：类似Excel中的拖拽填充...

    表格可按列筛选排序的分页 JS+CSS+DIV

    总的来说，“表格可按列筛选排序的分页 JS+CSS+DIV”是一个结合了前端技术的实用工具，实现了动态交互的表格功能，为网站后台的数据管理提供了便利。通过合理运用 JavaScript、CSS 和 HTML，开发者可以创建出功能...

    解决div总是被select遮挡的问题.rar

    在某些情况下，可能需要进一步调整`z-index`或者尝试其他解决方案，比如用JavaScript或jQuery监听`select`元素的显示和隐藏，动态调整`div`的`z-index`。 总的来说，解决`div`被`select`遮挡的问题需要对CSS的堆叠...

    JavaScript如何动态创建table表格

    本文将详细介绍两种JavaScript动态创建table表格的方法。 方法一：最原始的方法，通过`createElement()`函数逐个创建元素。这种方法需要手动构建表格的结构，包括`&lt;table&gt;`、`&lt;tbody&gt;`、`&lt;tr&gt;`和`&lt;td&gt;`等元素。例如...

    DIV+CSS网页标准实现表格形式的数据排列

    在“DIV+CSS网页标准实现表格形式的数据排列”这个主题中，我们将深入探讨如何利用这种技术来创建具有表格特性的数据展示方式，而无需使用传统的HTML `&lt;table&gt;` 标签。 首先，理解基础的HTML结构至关重要。`&lt;div&gt;` ...

    js动态创建table点击按钮dom table tr添加操作

    本主题主要聚焦于如何利用JavaScript动态创建一个包含表格（table）的DOM结构，并且在表格行（tr）中添加可点击的按钮。这通常用于展示数据集，允许用户进行交互操作，比如删除、编辑或查看详情。 首先，我们需要...

    js动态生成表格行列特效

    在JavaScript编程中，动态生成表格是一项常见的任务，尤其在网页交互和数据展示中。本教程将深入探讨如何使用JavaScript来创建具有颜色效果和取色功能的动态表格。 首先，我们需要理解HTML表格的基本结构，它由`...

    js自动生成表格

    `jQuery`作为一个广泛使用的JavaScript库，提供了许多方便的功能，而`Table.js`就是这样一个专为生成动态表格设计的插件。这个插件使得开发者无需编写复杂的HTML代码，就能轻松创建出功能丰富的表格。 `Table.js`的...

    JavaScript实现动态生成表格

    本文实例为大家分享了JavaScript实现动态生成表格的具体代码，供大家参考，具体内容如下 功能描述 在输入框中输入行和列，点击按钮，生成拥有对应行和列的表格。如下图所示： 分析 HTML界面设计 &lt;body&gt; 行...

    JS实现动态生成表格并提交表格数据向后端

    在JavaScript（JS）中动态生成表格并提交数据到后端是一项常见的前端开发任务，它涉及到DOM操作、事件处理以及与服务器的交互。以下是对这个过程的详细解释： 首先，为了实现动态生成表格，我们需要引入一个...

    JS动态添加tr

    本文将详细讲解如何使用JavaScript动态添加`&lt;tr&gt;`元素，即表格行，以及如何结合DIV+CSS实现页面布局。 一、JS动态添加`&lt;tr&gt;` 在HTML中，`&lt;table&gt;`元素用于创建表格，而`&lt;tr&gt;`元素代表表格的一行。在JavaScript中，...

Magicbox
Global site tag (gtag.js) - Google Analytics