一、动态表格传值(JS+Servlet)-（原创-logoc）

一、动态表格编辑+传值(JS+Servlet)

 

网上有很多关于如何动态添加表格（行），但是动态表格生成后的传值缺少相关资料，现将自己的体会分享给大家。

1、动态添加表格

  代码修改至网上实例，相信大家也可做到！（非重点）

1）对象获取
/**
 * @function  根据id值查找对象
 * @param thObj  id值
 * @param theDoc 范围
 * @return foundObj id值对应的对象
 * @author 李亮
 * @date 2011.5.2
 * **/
 function findObj(theObj, theDoc){  
	var p, i, foundObj;    
	if(!theDoc) 
		theDoc = document;  
	if( (p = theObj.indexOf("?")) > 0 && parent.frames.length){    
		theDoc = parent.frames[theObj.substring(p+1)].document;
		theObj = theObj.substring(0,p);  
	}
	if(!(foundObj = theDoc[theObj]) && theDoc.all) 
		foundObj = theDoc.all[theObj];  
		for (i=0; !foundObj && i < theDoc.forms.length; i++)     
			foundObj = theDoc.forms[i][theObj];  
				for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)     
					foundObj = findObj(theObj,theDoc.layers[i].document);  
					if(!foundObj && document.getElementById) 
						foundObj = document.getElementById(theObj);    
					return foundObj;
  }
2）添加表格行
/**
 * @function  添加鲜土样处理信息
 * @param null
 * @author 李亮
 * @date 2011.5.1
 * **/
function AddFreshSoilTableRow(){ 
  //读取最后一行的行号，存放在txtTRLastIndex文本框中 
	var txtTRLastIndex = findObj("txtTRLastIndex",document);
	var rowID = parseInt(txtTRLastIndex.value);
	
 	var sampleTable = findObj("sampleTable",document);
 //添加行   
 	var newTR = sampleTable.insertRow(sampleTable.rows.length);
 	newTR.id = "tableTR" + rowID;
 	newTR.align="center";
 	
 //添加列:序号
 	var newNameTD = newTR.insertCell(0);
 //添加列内容
 	newNameTD.innerHTML = newTR.rowIndex.toString();
 
  //添加列:原始编号
 	var newYsbhTD=newTR.insertCell(1);
 //添加列内容
 	newYsbhTD.innerHTML = "<input name='txtYsbh' id='txtYsbh' type='text' size='12'/>";
 	
 //添加列:统一编号
 	var newTybhTD=newTR.insertCell(2);
 //添加列内容
 	newTybhTD.innerHTML = "<input name='txtTybh' id='txtTybh' type='text' size='12'/>";
 
 //添加列:实验室编号
 	var newSysbhTD=newTR.insertCell(3);
 //添加列内容
 	newSysbhTD.innerHTML = "<input  name='txtSysbh' id='txtSysbh' type='text' size='12'/>";
 
 //添加列:处理内容
 	var newClTD=newTR.insertCell(4);
 //添加列内容
 	newClTD.innerHTML = "<input  name='txtCl' id='txtCl' type='text' size='12'/>";
 	
 //添加列:重复次数
 	var newCfTD=newTR.insertCell(5);
 //添加列内容
 	newCfTD.innerHTML = "<input name='txtCf' id='txtCf' type='text' size='6'/>"; 
 
 //添加列:硝态氮
 	var newXtNTD=newTR.insertCell(6);
 //添加列内容
 	newXtNTD.innerHTML = "<input type='checkbox' name='selAllXtN'/>";
 
 //添加列:铵态氮
 	var newAtNTD=newTR.insertCell(7);	
 //添加列内容
 	newAtNTD.innerHTML = "<input type='checkbox' name='selAllAtN' />";
 	
 //添加列:WaterPer
 	var newWaterPerTD=newTR.insertCell(8);
 //添加列内容
 	newWaterPerTD.innerHTML = "<input type='checkbox' name='selAllWaterPer' id='isWaterPer' />";
 	
 //添加删除列操作
	var newDeleteTD=newTR.insertCell(9);
 //添加列内容
 	newDeleteTD.innerHTML = "<div align='center' style='width:45px'><input type='button' name='saveSubmit' value='删除' onclick=\"DeleteTableRow('" + newTR.id +"')\"/>	</div>";
 
 //将行号推进下一行
 	txtTRLastIndex.value = (rowID + 1).toString() ;
}


3）删除表格行
	/**
	 * @function  删除指定行
	 * 
	 * **/
	function DeleteTableRow(rowid){
		var sampleTable = findObj("sampleTable",document);
		//var plantTable = document.get
		var tableItem = findObj(rowid,document);
 		//获取将要删除的行的Index
 		var rowIndex = tableItem.rowIndex;
 		//删除指定Index的行
 		sampleTable.deleteRow(rowIndex);
 	
 		//重新排列序号，如果没有序号，这一步省略
 		for(var i=rowIndex;i<sampleTable.rows.length;i++){
 			sampleTable.rows[i].cells[0].innerHTML = i.toString();
 		}
	}//清空列表


4）JSP or HTML页面代码
<div>
	<table width="100%" border="0" cellpadding="2" cellspacing="1" id="sampleTable">
             	<tr id="trHeader" align="center">
			<td width="70" bgcolor="#96E0E2">序号</td>
  		 	<td width="109" bgcolor="#96E0E2">原始ID</td>
  		 	<td width="109" bgcolor="#96E0E2">统一ID</td>
  		 	<td width="109" bgcolor="#96E0E2">实验室ID</td>
  		 	<td width="109" bgcolor="#96E0E2">处理内容</td>
  		 	<td width="93" bgcolor="#96E0E2">重复次数</td>
  		 	<td width="96" bgcolor="#96E0E2" >硝态氮<br /><input type="checkbox" id="selAllXtN" onclick="selectAllBox(this.id);"/></td>
  		 	<td width="96" bgcolor="#96E0E2" align="center">铵态氮<br /><input type="checkbox" id="selAllAtN" onclick="selectAllBox(this.id);"/></td>
  		 	<td width="96" bgcolor="#96E0E2" align="center">含水率<br /><input type="checkbox" id="selAllWaterPer" onclick="selectAllBox(this.id);"/></td>
			<td width="70" bgcolor="#96E0E2">操作</td>
		</tr>
	</table>
</div>
<div>
	<input type="button" name="addSubmit" value="添加" onclick="AddFreshSoilTableRow()" /> 
	<input type="button" name="clearSubmit" value="清空" onclick="ClearAllContent()" />	
	<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />													
	<input type="submit" name="saveSubmit" value="保存" onclick="SaveAllContent()"/>		
	<input type="text" id="sampleInfo" style="display:none"/>							
</div> 

 2、动态表格传值（重点，原创哦）

不管有没有人这么做过，但是这个方法是我自己想出来的，也是一点点写出来了。或许大家会有更好的方法，如有也请分享一下。

思路：在提交之前，将动态表格中的内容放到一个隐藏的<input style=“display：none” name="tableData" type="text" />中，通过这个统一将表格中的内容传递过去，这个大家都应该很明白什么意思了吧！

注意事项：通过JS向后台传递中文，与用form传递，字符解析方法是不同的。但中文字符传递一定要解析，不让会出现乱码，这一点很重要，网上有相关的资料，这里不再一一陈述。

具体做法（附代码）

 

 

1）页面代码
<input type="submit" name="saveSubmit" value="提交" onclick="SaveAllContent()"/>		
<input type="text" id="tableData" style="display:none"/>	

2）JS代码
/**
 * @function 保存表格内容
 * @ autor 李亮
 * 
 * **/	
function SaveAllContent(){
		if(confirm('确定要录入吗？')){
			var sampleTable = findObj("sampleTable",document);
			var rowsNum = sampleTable.rows.length; 			
			var arr = new Array(rowsNum);
			
			for(var i = 1;i < rowsNum; i++){			
				var rowId = "tableTR"+i;
				var rowTr = findObj(rowId,document);
				arr[i-1] = new Array(rowTr.cells.length-1);
				
				for (var j = 1;j < rowTr.cells.length; j++){
					if(sampleTable.rows[i].cells[j].children[0].type=="text"){
						arr[i-1][j-1] = sampleTable.rows[i].cells[j].children[0].value;
					}else if(sampleTable.rows[i].cells[j].children[0].type=="checkbox"){
						arr[i-1][j-1] = sampleTable.rows[i].cells[j].children[0].checked;
					}else{
						arr[i-1][j-1] = "#";
					}
				}
			}
			var tableData = findObj("tableData",document);
			tableData.value = arr;
		}
	}	

4）后台处理（Java）将字符创转换为二位数组，并用Bean类保存
/**
 * 
 * @param tableDate 页面js生成动态表中 传递过来的表格内容
 * @function String类型的tableDate转换为链表存储
 * @return ArrayList<FreshSoilBean> 鲜土样信息链表
 * @author 李亮
 * @date 2011.5.6
  * **/
	public ArrayList<FreshSoilBean> handFreshSoilTableData(String tableDate){		
		ArrayList<FreshSoilBean> list = new ArrayList<FreshSoilBean>();
		String[] tableRows = tableDate.split("#,");
		for(int i=0;i<tableRows.length;i++){		
			String[] tableCells = tableRows[i].split(",");
			for(int j=0;j<tableCells.length;j++){
				if(tableCells[j].equals("true"))
					tableCells[j]="1";
				else if(tableCells[j].equals("false"))
					tableCells[j]="0";
			}
			FreshSoilBean freshSoilBean = new FreshSoilBean();
			freshSoilBean.setPrid(tableCells[0]);
			freshSoilBean.setUnid(tableCells[1]);
			freshSoilBean.setExid(tableCells[2]);			
			freshSoilBean.setDealContent(tableCells[3]);
			freshSoilBean.setEchoNum(tableCells[4]);
			freshSoilBean.setIsWaterPer(tableCells[5]);
			freshSoilBean.setIsXtN(tableCells[6]);
			freshSoilBean.setIsAtN(tableCells[7]);
			freshSoilBean.setIsDone("0");
			list.add(freshSoilBean);			
		}
		return list;
	}

 

 3、小结

以上是我在做实验室数据管理系统的心得，Javascript能够很好的减轻后台数据处理负担，而今天Ajax的应用，让Javascript有了新的活力，也改变了很多人对Javascript的认识。对于想对Javascript有深入的了解童鞋，我强烈建议阅读一下《JavaScrpt 高级程序设计》图灵教育，人民邮电出版社出版。额，后续，我会陆续将我在Javascript其他体会写出来，大概会有Ajax（JavaScript+Servlet）实现案例代码；类万方、知网数据检索的前台实现；Javascript实现Excel导入导出等功能，等等Javascript其他应用。

 

评论

1 楼 QQ1145306946 2013-05-30  

能不能把完整点的代码给我呢？