任意行数的数据输入表格

最新推荐文章于 2025-08-12 21:03:53 发布
Hundecim
最新推荐文章于 2025-08-12 21:03:53 发布
阅读量809
点赞数
CC 4.0 BY-SA版权
文章标签： java js
本文链接：https://blog.youkuaiyun.com/Hundecim/article/details/38764111
初始界面：
点击添加就等添加一行输入框！
添加几行后的界面：
页面代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
 
    <title>My JSP 'insnewequipment.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
	<style type="text/css">
		table{
			table-layout:fixed;
   		 	empty-cells:show; 
    		border-collapse: collapse;
    		margin:0 auto;
    		background-color:#e8f3fd;
		} 
		td{
			text-align:center;
			border:1px solid #cad9ea;
		}
		a:link { 
			text-decoration: none; 
			color: blue; 
			line-hight:18px;
		} 
	</style>
	<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
	<script language="javascript" type="text/javascript">
	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;
		}
	}
	//添加一个参与人填写行
	function AddSignRow(){ 
		//读取最后一行的行号，存放在txtTRLastIndex文本框中 
		var txtTRLastIndex = findObj("txtTRLastIndex",document);
		var rowID = parseInt(txtTRLastIndex.value);
		if(rowID>12){
			alert("每次最多添加12个，请保存后继续添加！");
		}else{
	
		var signFrame = findObj("SignFrame",document);
		//添加行
		var newTR = signFrame.insertRow(signFrame.rows.length);
		newTR.id = "SignItem" + rowID;
	
		//添加列:设备编号
		var newEquipmentIdTD=newTR.insertCell(0);
		//添加列内容
		newEquipmentIdTD.innerHTML = "<input name='equipmentId" + rowID + "' id='equipmentId" + rowID + "' type='text' size='10' />";
		
		//添加列:设备种类
		var newEquipmentCategoryIdTD=newTR.insertCell(1);
		//添加列内容
		newEquipmentCategoryIdTD.innerHTML = "<select name='equipmentCategoryId" + rowID + "' id='equipmentCategoryId" + rowID + "' style='width:92px;'><option value='0'>请选择</option><option value='1'>POS机</option><option value='2'>PSAM卡</option><option value='3'>ISAM卡</option><option value='4'>采集器</option></select>";
		
		//添加列:出厂编号
		var newProductionIdTD=newTR.insertCell(2);
		//添加列内容
		newProductionIdTD.innerHTML = "<input name='productionId" + rowID + "' id='productionId" + rowID + "' type='text' size='10' />";
		
		//添加列:设备类型
		var newEquipmentTypeIdTD=newTR.insertCell(3);
		//添加列内容
		newEquipmentTypeIdTD.innerHTML = "<select name='equipmentTypeId" + rowID + "' id='equipmentTypeId" + rowID + "' style='width:92px;'><option value='0'>请选择</option><option value='1'>普通消费POS</option><option value='2'>公交车载POS</option></select>";
		
		//添加列:设备型号
		var newEquipmentModelTD=newTR.insertCell(4);
		//添加列内容
		newEquipmentModelTD.innerHTML = "<input name='equipmentModel" + rowID + "' id='equipmentModel" + rowID + "' type='text' size='10' />";
		
		//添加列：备注
		var newNotesTD=newTR.insertCell(5);
		//添加列内容
		newNotesTD.innerHTML = "<input name='notes" +rowID+"'id'=notes"+rowID+"'type='text' size='18' />";
		//添加列:删除按钮
		var newDeleteTD=newTR.insertCell(6);
		//添加列内容
		newDeleteTD.innerHTML = "<div align='center' style='width:100px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";
		
		//将行号推进下一行
		txtTRLastIndex.value = (rowID + 1).toString() ;
		}
	}
	
	
	//删除指定行
	function DeleteSignRow(rowid){
		var signFrame = findObj("SignFrame",document);
		var signItem = findObj(rowid,document);
	
		//获取将要删除的行的Index
		var rowIndex = signItem.rowIndex;
	
		//删除指定Index的行
		signFrame.deleteRow(rowIndex);
	
	}
	
	//清空列表
	function ClearAllSign(){
		if(confirm('确定要清空所有吗？')){
			var signFrame = findObj("SignFrame",document);
			var rowscount = signFrame.rows.length;
	
			//循环删除行,从最后一行往前删除
			for(var i=rowscount - 1;i > 0; i--){
	   		signFrame.deleteRow(i);
			}
	
			//重置最后行号为1
			var txtTRLastIndex = findObj("txtTRLastIndex",document);
			txtTRLastIndex.value = "1";
	
			//预添加一行
			AddSignRow();
		}
	}
	
	
	</script>
	

  </head>
  
  <body>
  	<div style="text-align:center;">新增设备入库<hr/></div>
  	
  	<table style="margin:0 auto;">
  		<tr>
  			<td style="width:100px;">设备厂商</td>
  			<td style="width:200px; text-align:left;" colspan=3>
  				<select name="supplierId" id="supplierId" style="width:200px;">
    				<option value="1111">CMCC-EDU</option>
        			<option value="2222">ChinaNet</option>
        			<option value="3333">ChinaUnicom</option>
        			<option value="4444">SDIPT</option>
    			</select><span style="color:red;">*</span>
  			</td>
  		</tr>
  		<tr>
  			<td>经办人</td>
  			<td style="width:209px; text-align:left;"><input type="text" name="buyPerson" id="buyPerson" /><span style="color:red;">*</span></td>
  			<td style="width:100px;">日期</td>
  			<td style="width:350px; text-align:left;"><input class="Wdate" type="text" name="purchaseDate" id="purchaseDate" onClick="WdatePicker()"></td>
  		</tr>
  	</table>
  	
  	<table style="margin:0 auto; margin-top:1px;" id="SignFrame">
  		<tr id="trHeader">
  			<td style="width:100px;">设备编号</td>
  			<td style="width:100px;">设备种类</td>
  			<td style="width:100px;">出厂编号</td>
  			<td style="width:100px;">设备类型</td>
  			<td style="width:100px;">设备型号</td>
  			<td style="width:150px;">备注</td>
  			<td style="width:100px;">操作</td>
  		</tr>
  	</table>
  	
  	<table>
  		<tr>
  			<td style="width:665px;"></td>
  			<td style="width:100px;"><a href="javascript:;" onclick="AddSignRow()">添加</a></td>
  		</tr>
  		<tr>
  			<td colspan=2>
  				<input type="button" name="Submit1" value="保存" onclick="AddEquipment()">
  				<input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />
  				<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
  			</td>
  		</tr>
  	</table>
  	
  </body>
</html>