- 浏览: 6352807 次
- 性别:
- 来自: 一片神奇的土地
文章分类
- 全部博客 (745)
- JQuery (25)
- JS (33)
- 数据库 (59)
- Java基础 (56)
- JSON (8)
- XML (8)
- ireport (7)
- 设计模式 (10)
- 心情 (14)
- freemarker (1)
- 问题 (15)
- powerdesigner (2)
- CSS (15)
- DWR (4)
- tomcat (16)
- Hibernate (12)
- Oracle (7)
- Struts (7)
- Spring (34)
- JSP (23)
- 需学习 (64)
- 工具类库 (63)
- Maven (14)
- 笔试题 (34)
- 源码学习 (31)
- 多线程 (39)
- Android (32)
- 缓存 (20)
- SpringMVC (14)
- jQueryEasyUi (12)
- webservice-RPC (13)
- ant (1)
- ASP.NET (10)
- 正则表达式 (3)
- Linux (15)
- JBoss (1)
- EJB (3)
- UML (2)
- JMS (3)
- Flex (8)
- JSTL (2)
- 批处理 (5)
- JVM (16)
- 【工具】 (16)
- 数据结构 (29)
- HTTP/TCP/Socket (18)
- 微信 (1)
- tomcat源码学习 (15)
- Python (30)
- 主机 (2)
- 设计与架构 (19)
- thrift-RPC (2)
- nginx (6)
- 微信小程序 (0)
- 分布式+集群 (12)
- IO (1)
- 消息队列 (4)
- 存储过程 (8)
- redis (9)
- zookeeper (5)
- 海量数据 (5)
最新评论
-
360pluse:
技术更新,战术升级!Python爬虫案例实战从零开始一站通网盘 ...
Python爬虫实战:Scrapy豆瓣电影爬取 -
18335864773:
推荐用 pageoffice 组件生成 word 文件。
JAVA生成WORD工具类 -
jjhe369:
LISTD_ONE 写道起始地址为163.135.0.1 结束 ...
IP地址与CIDR -
baojunhu99:
private final int POOL_SIZE = 5 ...
使用CompletionService获取多线程返回值 -
LovingBaby:
胡说,javascript 运行时是单线程的,event lo ...
Ajax请求是否可以实现同步
实现的效果:点击+号添加一组
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');" /> <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);" /> <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" /> </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" /> </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 +")' /> "; tmpTD += " <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'> "; td2.innerHTML = "<input onfocus='this.select();' id='cxlPolicyNight"+ cpTBAddTR +"' name='xlpPolicyNight"+ cpTBAddTR +"' type='text' style='width:60px'> "; 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
发表评论
-
Form的onsubmit
2015-02-05 11:06 47781. <form class="for ... -
使文本框不可编辑[不太常用的方法]
2012-09-10 11:17 2424为了使本框不可编辑,我们可以使用下面几种方法 解决思路: 文本 ... -
C 标签使用
2012-07-26 12:16 2934<title>虚拟机管控</title&g ... -
显示结果排序
2012-05-04 14:15 1293<td width="9%" s ... -
select级联操作的简便方法
2012-04-18 15:07 7795<script type=&quo ... -
GuestName处理方法
2012-01-31 10:39 2166主要考虑如何设计,如何实现,如何思考! 效果: ... -
[基础]Map在JSP中的两种显示方式
2011-10-27 09:36 139131、 Java: for(EglSpecialRequ ... -
JSP自定义标签
2011-09-01 12:07 1722实际使用: <td style="text- ... -
[转]如何用div+css布局页面
2011-08-01 17:58 2295如今web2.0炒的很厉害, ... -
iframe总结 + window.open
2011-06-20 11:47 15977从frame中跳出并转向: parent.window. ... -
window.showModalDialog()
2011-06-01 15:23 3599window.open() 打开一个普通窗口 win ... -
一个星期中某一天存在即显示的思路
2011-05-31 17:48 11541、 days: 1,2,3,4,5,6,0 // ... -
某一模块动态+、—效果的实现
2011-04-21 11:08 1373代码(去掉部分css细节,只关注主要功能): < ... -
批量更新时判断哪个需要更新
2011-04-06 16:03 1882<input type="checkbox ... -
JSP中循环二维数组 + 循环Map
2011-04-01 16:46 7264代码如下: <C:forEach items=&q ... -
[基础]由复选框实现的批量删除
2011-03-21 11:31 2999批量删除: 选中多个复选框: 每一条记录: ... -
table总结insertRow、deleteRow
2011-03-16 16:13 20507表格有几行: var trCnt = table.rows.l ... -
struts中用到的复选框和查询技巧
2011-03-09 11:06 123实现效果:1、选中复选框时,其后文本框显示,没选中时,隐藏 ... -
js实现的复选框选中时的批量操作
2011-03-04 14:22 57331. var checkedList = []; // sa ... -
利用getParameterNames实现一个按钮所有模块数据都提交
2010-11-27 13:13 15751.总结: 1、注意 ...
相关推荐
实现table的insertRow实现table的insertRow实现table的insertRow实现table的insertRow实现table的insertRow实现table的insertRow
`deleteRow()`方法则用于删除表格中的某一行。同样,这个方法也需要考虑到浏览器兼容性问题。例如,调用`table.deleteRow(index)`会在指定行号的位置删除一行。如果`index`无效,也会抛出`INDEX_SIZE_ERR` DOM...
jQuery是一种广泛使用的JavaScript库,它简化了DOM操作,包括在表格中动态修改内容。 首先,我们要理解HTML表格的基本结构,一个表格由`<table>`元素包含,其中包含`<tr>`(行)和`<td>`(单元格)。使用jQuery,...
还有是初始数据全部可编辑,插入新行也是可编辑的,全部编辑形式是input框里直接编辑,失去焦点触发事件,非官方自带的编辑形式,将页面放到bootstrap-table的demo项目的insertRow.html同目录下即可
4. 插入元素:使用`insertRow`和`insertCell`方法插入新的行和单元格。 5. CSS样式:通过`style`属性设置单元格的背景色、文字等样式。 6. 单元格合并:利用`rowSpan`和`colSpan`属性合并单元格。 理解并掌握这些...
本文将深入探讨 `table` 对象中的 `insertRow` 和 `deleteRow` 方法,并通过一个实际的示例来展示它们的使用方法。 ### 1. `table` 对象 在JavaScript中,`table` 对象代表HTML中的 `<table>` 元素。它提供了多种...
本文实例为大家分享了bootstrap table双击可编辑的具体代码,供大家参考,具体内容如下 html: <table class=table id=para_table> 名称 值 操作 <td style=tex
本教程将详细介绍如何使用JavaScript(js)实现从Excel文档批量复制数据并粘贴到HTML表格(table)中的技术。这一功能对于数据处理、报表展示以及用户交互等方面具有很高的实用价值。 首先,我们要明白JavaScript...
var newRow = table.insertRow(-1); // 在表格的末尾插入新行 for (var i = 0; i ; i++) { var newCell = newRow.insertCell(i); newCell.innerHTML = data[i]; } } // 使用方法 addRow('myTable', ['李四', ...
1. **数据绑定与操作**:vxe-table支持动态数据绑定,可以实时更新表格内容,同时提供便捷的数据增删改查操作,如insertRow、removeRow等API。 2. **表头与列配置**:通过灵活的列配置,开发者可以自定义列的显示...
- 考虑到性能,大量数据更新时可使用`innerHTML`一次性替换整个表格,或使用`insertRow()`、`insertCell()`等方法逐个添加。 - 如果数据量大且频繁修改,考虑使用虚拟滚动或局部渲染来提高性能。 - 对于更复杂的...
var row = table.insertRow(); // 添加单元格并设置内容 // ... } }); ``` 5. **HTML结构**:创建一个HTML表格`<table id="myTable">...</table>`,并使用JavaScript动态填充数据。 这个例子展示了DWR如何...
以下是一个使用`insertRow()`的例子: ```html <table id="myTable" border="1"> <tr><td>Row1 cell1</td><td>Row1 cell2</td></tr> <tr><td>Row2 cell1</td><td>Row2 cell2</td></tr> </table> ()" value="Insert...
JSP中使用JavaScript动态插入删除输入框实现代码 JSP(Java Server Pages)是一种基于Java技术的服务器端脚本语言,主要用于生成动态网页内容。JavaScript则是一种客户端脚本语言,主要用于实现网页的交互功能。在...
这个例子主要展示了如何使用JS实现这一功能。首先,我们来理解动态添加表格行的基本概念。 表格(Table)是HTML中用于组织数据的一种结构,通过`<table>`, `<tr>`, `<td>`等标签构建。在JavaScript中,我们可以操作...
var row = table.insertRow(-1); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); cell1.innerHTML = "新行,列1"; cell2.innerHTML = "新行,列2"; } ``` "中脉综合操作平台0.70"可能是一个...
总结来说,使用JavaScript展示`<table>`是一种常见且强大的数据呈现方式,结合SSO和选项卡切换等技术,可以创建出交互性更强、用户体验更佳的Web应用。以上内容只是一个基础起点,实际开发中还需要考虑性能优化、...
本篇文章将深入探讨如何使用JavaScript实现这一功能,包括选择表格元素、获取和设置单元格内容,以及监听事件来实时更新表格。 首先,我们需要了解HTML中的`<table>`元素结构,通常包括`<tr>`(行)、`<th>`(表头...
下面将详细阐述如何通过JavaScript的`insertRow`方法将下拉框的内容插入到表格中,并使用`delRow`方法删除表格中的行。 首先,我们需要了解HTML的`<select>`元素,它是创建下拉框的主要方式。下拉框通常包含一系列`...