`
uule
  • 浏览: 6352875 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

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

    博客分类：
  • JSP
jQueryprototypeFirefoxJavaScriptCSS 
阅读更多

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


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
分享到：
| [基础]由复选框实现的批量删除
评论
发表评论

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

相关推荐

    实现table的insertRow

    实现table的insertRow实现table的insertRow实现table的insertRow实现table的insertRow实现table的insertRow实现table的insertRow

    table insertRow、deleteRow定义和用法总结

    `deleteRow()`方法则用于删除表格中的某一行。同样，这个方法也需要考虑到浏览器兼容性问题。例如，调用`table.deleteRow(index)`会在指定行号的位置删除一行。如果`index`无效，也会抛出`INDEX_SIZE_ERR` DOM...

    利用jquery给指定的table动态添加一行、删除一行的方法

    jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个表格由`&lt;table&gt;`元素包含，其中包含`&lt;tr&gt;`（行）和`&lt;td&gt;`（单元格）。使用jQuery，...

    bootstrap-table插入可编辑行，文本框形式（非官方自带的）

    还有是初始数据全部可编辑，插入新行也是可编辑的，全部编辑形式是input框里直接编辑，失去焦点触发事件，非官方自带的编辑形式，将页面放到bootstrap-table的demo项目的insertRow.html同目录下即可

    JS实现动态修改table及合并单元格的方法示例

    4. 插入元素：使用`insertRow`和`insertCell`方法插入新的行和单元格。 5. CSS样式：通过`style`属性设置单元格的背景色、文字等样式。 6. 单元格合并：利用`rowSpan`和`colSpan`属性合并单元格。 理解并掌握这些...

    table对象中的insertRow与deleteRow使用示例

    本文将深入探讨 `table` 对象中的 `insertRow` 和 `deleteRow` 方法，并通过一个实际的示例来展示它们的使用方法。 ### 1. `table` 对象 在JavaScript中，`table` 对象代表HTML中的 `&lt;table&gt;` 元素。它提供了多种...

    bootstrap table实现双击可编辑、添加、删除行功能

    本文实例为大家分享了bootstrap table双击可编辑的具体代码，供大家参考，具体内容如下 html： &lt;table class=table id=para_table&gt; 名称 值 操作 &lt;td style=tex

    js excel 批量复制数据到 html

    本教程将详细介绍如何使用JavaScript（js）实现从Excel文档批量复制数据并粘贴到HTML表格（table）中的技术。这一功能对于数据处理、报表展示以及用户交互等方面具有很高的实用价值。 首先，我们要明白JavaScript...

    javascript table 增加删除行,巧妙实现

    var newRow = table.insertRow(-1); // 在表格的末尾插入新行 for (var i = 0; i ; i++) { var newCell = newRow.insertCell(i); newCell.innerHTML = data[i]; } } // 使用方法 addRow('myTable', ['李四', ...

    vxe-table vue表格解决方案 v4.5.20.zip

    1. **数据绑定与操作**：vxe-table支持动态数据绑定，可以实时更新表格内容，同时提供便捷的数据增删改查操作，如insertRow、removeRow等API。 2. **表头与列配置**：通过灵活的列配置，开发者可以自定义列的显示...

    js实时修改table数据

    - 考虑到性能，大量数据更新时可使用`innerHTML`一次性替换整个表格，或使用`insertRow()`、`insertCell()`等方法逐个添加。 - 如果数据量大且频繁修改，考虑使用虚拟滚动或局部渲染来提高性能。 - 对于更复杂的...

    一个DWR实现table的小例子

    var row = table.insertRow(); // 添加单元格并设置内容 // ... } }); ``` 5. **HTML结构**：创建一个HTML表格`&lt;table id="myTable"&gt;...&lt;/table&gt;`，并使用JavaScript动态填充数据。 这个例子展示了DWR如何...

    javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)

    以下是一个使用`insertRow()`的例子： ```html &lt;table id="myTable" border="1"&gt; &lt;tr&gt;&lt;td&gt;Row1 cell1&lt;/td&gt;&lt;td&gt;Row1 cell2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row2 cell1&lt;/td&gt;&lt;td&gt;Row2 cell2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; ()" value="Insert...

    JSP中使用JavaScript动态插入删除输入框实现代码.docx

    JSP中使用JavaScript动态插入删除输入框实现代码 JSP（Java Server Pages）是一种基于Java技术的服务器端脚本语言，主要用于生成动态网页内容。JavaScript则是一种客户端脚本语言，主要用于实现网页的交互功能。在...

    一个动态添加table行的js例子

    这个例子主要展示了如何使用JS实现这一功能。首先，我们来理解动态添加表格行的基本概念。 表格（Table）是HTML中用于组织数据的一种结构，通过`&lt;table&gt;`, `&lt;tr&gt;`, `&lt;td&gt;`等标签构建。在JavaScript中，我们可以操作...

    简单网页table布局

    var row = table.insertRow(-1); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.innerHTML = "新行，列1"; cell2.innerHTML = "新行，列2"; } ``` "中脉综合操作平台0.70"可能是一个...

    js展现table方法

    总结来说，使用JavaScript展示`&lt;table&gt;`是一种常见且强大的数据呈现方式，结合SSO和选项卡切换等技术，可以创建出交互性更强、用户体验更佳的Web应用。以上内容只是一个基础起点，实际开发中还需要考虑性能优化、...

    js实现动态修改table内容功能

    本篇文章将深入探讨如何使用JavaScript实现这一功能，包括选择表格元素、获取和设置单元格内容，以及监听事件来实时更新表格。 首先，我们需要了解HTML中的`&lt;table&gt;`元素结构，通常包括`&lt;tr&gt;`（行）、`&lt;th&gt;`（表头...

    下拉框的内容通过js插入到table中

    下面将详细阐述如何通过JavaScript的`insertRow`方法将下拉框的内容插入到表格中，并使用`delRow`方法删除表格中的行。 首先，我们需要了解HTML的`&lt;select&gt;`元素，它是创建下拉框的主要方式。下拉框通常包含一系列`...

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