论坛首页 → Web前端技术论坛 →

使用Table的insertRow实现某一模块的复制

浏览 2143 次
锁定老帖子 主题：使用Table的insertRow实现某一模块的复制
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • uule
  • 等级: 初级会员
  • 性别:
  • 文章: 36
  • 积分: 60
  • 来自: 一片神奇的土地
   发表时间：2011-03-21   最后修改：2011-04-26

实现的效果：点击+号添加一组


JSP页面：

<table style="width:100%">
	<tr>
		<td colspan="2" style="font-weight:bold; padding-left:2px; color:red; width:200px; padding-bottom:10px;">
			<span style="text-decoration:underline;">Cancellation Policy</span>
			<input style="width:20px;" class='cancellationPolicy'  type="button" value="+" onClick="cancellationPolicyStatus('open');" />&nbsp;
			<input style="width:20px;" class='cancellationPolicy' type="button" value="-" onClick="cancellationPolicyStatus('close');" />
		</td>
	</tr>
	<tr id="idCancellationPolicyContent">
		<td style="width:25%;">
			<table id="cpTB" name="cpTB" width="100%" style="padding-top:0px; color:#848284;"  cellpadding="0" cellspacing="0">	
				<tr id="cpTR0" name="cpTR0">
					<td style="text-align:right; padding-right:35px;" colspan="2">
						<input style="width:20px;" class='cancellationPolicy'  type="button" value="+" onClick="cpOperate('cpTB', 'cpTR0', 'cpTR1', 'cpTR2', 'cpTR3', 'add', null);" />&nbsp;
						<input style="width:20px;" class='cancellationPolicy' type="button" value="-" onClick="cpOperate('cpTB', 'cpTR0', 'cpTR1', 'cpTR2', 'cpTR3', 'delete', null);" />
					</td>
				</tr>
				<tr id="cpTR1" name="cpTR1">
					<td style="width:220px; padding-left:2px;">Cancellation day(s)</td>
					<td style="width:220px; text-align:center;"><input onfocus="this.select();" id="cxlPolicyDay0" name="cxlPolicyDay0" style="width:60px" type="text" />&nbsp;&nbsp;&nbsp;</td>
				</tr>
				<tr id="cpTR2" name="cpTR2">
					<td>Charge by night(s)</td>
					<td style="text-align:center;"><input onfocus="this.select();" id="cxlPolicyNight0" name="cxlPolicyNight0" style="width:60px" type="text" />&nbsp;&nbsp;&nbsp;</td>
				</tr>
				<tr id="cpTR3" name="cpTR3">
					<td>Charge by percent</td>
					<td style="text-align:center;"><input onfocus="this.select();" id="cxlPolicyPercent0" name="cxlPolicyPercent0" style="width:60px" type="text" />%</td>
				</tr>
			</table>
		</td>		
	</tr>
</table>
  
	//cpOperate('cpTB', 'cpTR0', 'cpTR1', 'cpTR2', 'cpTR3', 'add', null)

	var CP_MIN_ROWS_CNT = 4;
	var cpTBAddTR = 4;

	function cpOperate(tableName, tr0Id, tr1Id, tr2Id, tr3Id, op, data) {

		var table = $(tableName);
		var trCnt = table.rows.length;  
		
		/* fill values */
		if (op == 'fill') {		 
			
			/* get dom objects */
			var fillTR0 = $(tr0Id);
			var fillTR1 = $(tr1Id);
			var fillTR2 = $(tr2Id);
			var fillTR3 = $(tr3Id);
			
			try {
//				var fillTD0 = fillTR0.cells(1).childNodes[0];
				var fillTD1 = fillTR1.cells(1).childNodes[0];
				var fillTD2 = fillTR2.cells(1).childNodes[0];
				var fillTD3 = fillTR3.cells(1).childNodes[0];
				
				fillTD1.value = data.getCxlDay();
				fillTD2.value = data.getCxlNight();
				fillTD3.value = data.getCxlPercent();
				
				if ( $F("operate") == "split" ) {
					//fillTD1.disabled = true;
					//fillTD2.disabled = true;
					//fillTD3.disabled = true; 
				}
				
			} catch (e) {
				// firefox 
//				var tds = fillTR0.getElementsByTagName("td");
//				fillTD0 = tds[1];		
				
				var tds = fillTR1.getElementsByTagName("td");
				fillTD1 = tds[1];
								
				tds 	= fillTR2.getElementsByTagName("td");
				fillTD2 = tds[1];
				
				tds 	= fillTR3.getElementsByTagName("td");
				fillTD3 = tds[1];
				
				fillTD1.childNodes[0].value = data.getCxlDay();	
				fillTD2.childNodes[0].value = data.getCxlNight();
				fillTD3.childNodes[0].value = data.getCxlPercent();
				
				if ( $F("operate") == "split" ) {
						//fillTD1.childNodes[0].disabled = true;
						//fillTD2.childNodes[0].disabled = true;
						//fillTD3.childNodes[0].disabled = true; 
				}				
				tds = null;								
			}		
			// fill values 
			fillTR0 = null;
			fillTD1 = null;
			fillTD2 = null;
			fillTD3 = null;
			
		} else if (op == "add") {
		
			/* set new name and id of new trs */
			var tmp0TrId 	= "cpTR" + cpTBAddTR;
			var tmp1TrId 	= "cpTR" + (cpTBAddTR+1);
			var tmp2TrId	= "cpTR" + (cpTBAddTR+2);
			var tmp3TrId	= "cpTR" + (cpTBAddTR+3);
			
			/* insert 3 rows */
			if (jQuery.browser.mozilla) { 			
				var tr3 = table.insertRow(-1);
				var tr2 = table.insertRow(-1);
				var tr1 = table.insertRow(-1);
				var tr0 = table.insertRow(-1); 				
			} else { 
				var tr3 = table.insertRow(trCnt);
				var tr2 = table.insertRow(trCnt);
				var tr1 = table.insertRow(trCnt);
				var tr0 = table.insertRow(trCnt); 
			}
			
			/* set id and name for tr */
			tr0.id 		= tmp0TrId;
			tr1.id 		= tmp1TrId;
			tr2.id 		= tmp2TrId;
			tr3.id 		= tmp3TrId;
			
			tr0.name 	= tmp0TrId;
			tr1.name 	= tmp1TrId;
			tr2.name 	= tmp2TrId;
			tr3.name 	= tmp3TrId;
		
			/* insert first cell of each row */
			if (jQuery.browser.mozilla) { 			
				var td0 	= tr0.insertCell(-1);
				var td1 	= tr1.insertCell(-1);
				var td2 	= tr2.insertCell(-1);
				var td3 	= tr3.insertCell(-1);				 
			} else { 			
				var td0 	= tr0.insertCell(0);
				var td1 	= tr1.insertCell(0);
				var td2 	= tr2.insertCell(0);
				var td3 	= tr3.insertCell(0); 
			}
			
			/* insert '+' and '-' buttons */
			var tmpTD 		= "<input style='width:20px;' class='cancellationPolicy'  type='button' value='+' onclick='cpOperate(\"cpTB\", \"" + tmp0TrId + "\", \"" + tmp1TrId + "\", \"" + tmp2TrId + "\", \"" + tmp3TrId + "\", \"add\", "+ null +")' />&nbsp;";
			tmpTD 			+= "&nbsp;<input style='width:20px;' class='cancellationPolicy' type='button' value='-' onclick='cpOperate(\"cpTB\", \"" + tmp0TrId + "\", \"" + tmp1TrId + "\", \"" + tmp2TrId + "\", \"" + tmp3TrId + "\", \"delete\")' />";
			td0.innerHTML 	= tmpTD;
			
			jQuery(td0).css({'text-align':'right', 'padding-right':'40px'});
			td0.colSpan = 2;
			
			td1.innerHTML 			= "Cancellation day(s)";
			td1.style.width 		= "220px";
			td1.style.paddingLeft 	= "2px";
			
			td2.innerHTML = "Charge by night(s)";
			
			td3.innerHTML = "Charge by percent";
			
			td0 = null;
			td1 = null;
			td2 = null;
			td3 = null;
			
			/* insert second cell of each row */
			if (jQuery.browser.mozilla) { 			
				var td0 = tr0.insertCell(-1);
				var td1 = tr1.insertCell(-1);
				var td2 = tr2.insertCell(-1);
				var td3 = tr3.insertCell(-1);				 
			} else {
				td0 = tr0.insertCell(1);
				td1 = tr1.insertCell(1);
				td2 = tr2.insertCell(1);
				td3 = tr3.insertCell(1);
			}
			
			td1.innerHTML = "<input onfocus='this.select();' id='cxlPolicyDay"+ cpTBAddTR +"' name='cxlPolicyDay"+ cpTBAddTR +"' style='width:60px' type='text'>&nbsp;&nbsp;&nbsp;";
			td2.innerHTML = "<input onfocus='this.select();' id='cxlPolicyNight"+ cpTBAddTR +"' name='xlpPolicyNight"+ cpTBAddTR +"' type='text' style='width:60px'>&nbsp;&nbsp;&nbsp;";
			td3.innerHTML = "<input onfocus='this.select();' id='cxlPolicyPercent"+ cpTBAddTR +"' name='cxlPolicyPercent"+ cpTBAddTR +"' style='width:60px' type='text'>%";
			
			td1.style.width 	= "200px";
			td1.style.textAlign	= 'center';
			td2.style.textAlign	= 'center';
			td3.style.textAlign	= 'center';
			
			td0 = null;
			td1 = null;
			td2 = null;
			td3 = null;
			
			cpTBAddTR 	+= CP_MIN_ROWS_CNT;
			
		} else if (op == "delete") {			
			if (trCnt <= CP_MIN_ROWS_CNT) { return; }	// no more row can be deleted
			if(!confirm("Do you confirm delete?")) return;
			
			for (var i=0; i<trCnt; i++) {
				if (table.rows[i] && table.rows[i].id == tr0Id) {
					table.deleteRow(i);
				}				
				if (table.rows[i] && table.rows[i].id == tr1Id) {
					table.deleteRow(i);
				}				
				if (table.rows[i] && table.rows[i].id == tr2Id) {
					table.deleteRow(i);
				}				
				if (table.rows[i] && table.rows[i].id == tr3Id) {
					table.deleteRow(i);
				}
			}
		}
	}

 保存数据：

 

var cxlPolicyList = [];
var cpTBAddTR 	  = 4;

<input type="hidden" id="cxlPolicyDay" name="cxlPolicyDay" >

function doSave(){
	var cxlPolicyDayList 	= "";
	for ( var i=0; i<cpTBAddTR; i++ ) 
	{	
				var row	= $("cpTR"+i);						
				
				if ( !row || row == null || row == 'undefined' ) 
				{ row=null; continue; }

				/* no value */	
				//当为0时，为+、-操作行
				if ( i % 4 == 0)
				{					
					if ( 
						(trim($("cxlPolicyDay"+i).value)=='' || trim($("cxlPolicyDay"+i).value)=='0') && 
						(trim($("cxlPolicyNight"+i).value)=='' || trim($("cxlPolicyNight"+i).value)=='0') && 
						trim($("cxlPolicyPercent"+i).value)=='') {										
						continue;
					}
				}
				if ( $("cxlPolicyDay"+i) ) 
				{							
					var value = $("cxlPolicyDay"+i).value;	
					cxlPolicyDayList += ( ( trim( value ) == "" ) ? "0" : trim( value ) ) + ",";
				} 												
				row = null;								
			}
			cxlPolicyDayList 		= cxlPolicyDayList.substr(0, cxlPolicyDayList.length-1);
			$("cxlPolicyDay").value 	= cxlPolicyDayList;
｝

Java：
	String cxlPDays = request.getParameter("cxlPolicyDay");
	String[] dayList = days.split(",");

 

进入页面时填充数据：

read.java:

  request.getSession().setAttribute("CXLPOLICYLIST", markupList);

 

<!-- Fill cxpPolicy list into javascript vars -->
<c:forEach items="${CXLPOLICYLIST}" var="item">	
<script>	
	cxlPolicyList[cxlPolicyList.length] = new CxlPolicy();
	cxlPolicyList[cxlPolicyList.length-1].setInternalid("${item.internalid}");		
	cxlPolicyList[cxlPolicyList.length-1].setTariffid("${item.tariffid}");		
	cxlPolicyList[cxlPolicyList.length-1].setCxlDay("${item.cxldays}");		
	cxlPolicyList[cxlPolicyList.length-1].setCxlNight("${item.cxlnights}");		
	cxlPolicyList[cxlPolicyList.length-1].setCxlPercent("${item.cxlpercent}");			
</script>
</c:forEach>
  
// CxlPolicy Class	
	function CxlPolicy() {
		this.internalid = "";
		this.tariffid = "";
		this.cxlday = "";
		this.cxlnight = "";
		this.cxlpercent = "";
	}
	
	CxlPolicy.prototype.setInternalid = function (id) { this.internalid = id; }
	CxlPolicy.prototype.getInternalid = function () { return this.internalid; }
	
	CxlPolicy.prototype.setTariffid = function(tId) { this.tariffid = tId; }
	CxlPolicy.prototype.getTariffid = function() { return this.tariffid; }
	
	CxlPolicy.prototype.setCxlDay = function (day) { this.cxlday = day; }
	CxlPolicy.prototype.getCxlDay = function () { return this.cxlday; }
	
	CxlPolicy.prototype.setCxlNight = function (night) { this.cxlnight = night; }
	CxlPolicy.prototype.getCxlNight = function () { return this.cxlnight; }
	
	CxlPolicy.prototype.setCxlPercent = function (percent) { this.cxlpercent = percent; }
	CxlPolicy.prototype.getCxlPercent = function () { return this.cxlpercent; }
  
window.onload = function(){
	initCancelPolicyFields();
}
  
function initCancelPolicyFields() { 
		if (cxlPolicyList.length <= 0) { return; }
		// fill values into first row of cancel policy

		cpOperate('cpTB', 'cpTR0', 'cpTR1', 'cpTR2', 'cpTR3', 'fill', cxlPolicyList[0]);
			//页面上本来有一组文本框，进入页面时先将其赋值
	
		var cancellationPolicyInitTotalRows = 4;
		
		//每一次循环为一组数据，先构造一组文本框，再填充数据
		for (var i=1; i<cxlPolicyList.length; i++) {
			cpOperate('cpTB', 'cpTR0', 'cpTR1', 'cpTR2', 'cpTR3', 'add', null);
			cpOperate('cpTB', 'cpTR'+ (i * cancellationPolicyInitTotalRows), 'cpTR'+ (i * cancellationPolicyInitTotalRows + 1), 'cpTR'+ (i * cancellationPolicyInitTotalRows + 2), 'cpTR'+ (i * cancellationPolicyInitTotalRows + 3), 'fill', cxlPolicyList[i]);
		}		
	}

 

Table基础：http://uule.iteye.com/blog/964355

 

 

  • 大小: 6.5 KB
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics