- 浏览: 464940 次
- 性别:
- 来自: 南京
文章分类
最新评论
-
a1439226817:
能不能发下源码1439226817@qq.com
ExtJsCRUD组件实现 -
w923690968:
[list][*]引用[u][/u][/list]
[JS]Drag And Drop -
zhumingyuan:
您好!用的的是3.2.3版本,按照您的方法配置了一下,但是还是 ...
spring vmc3.1.1 下,通过AnnotationMethodHandlerAdapter配置webBindingInitializer失效解决方案 -
sumo084:
我把xDarkness-MultClrBubble-1.0.j ...
JAVA实现类泡泡屏保效果 -
sumo084:
求源码,楼主好人,630483738@qq.com,谢谢
JAVA实现类泡泡屏保效果
struts2中可以自动封装表单提交过来的参数
但是页面中需要可以通过js动态添加行,实现代码如下
看一下这行代码的效果:
结果td的起始标签不见了,替换后只剩下td的结束标签,原因未知
然后试着将td的innerHTML进行替换
调试一看,样式及一些自定义属性不见了
没办法,只能找出所有input,改变其id、name了
完美了?测试看看效果
点击最下面的时间选择控件,结果发现,其定位到了第一行中的tr上去了,newTr中元素绑定的事件都绑定到原始tr了,看来cloneNode(true)会拷贝元素在内存中的所有状态
还是老老实实的通过dom创建元素吧:
OK,搞定......
List<RuleHour> exSeasonOut = new ArrayList<RuleHour>();
<tr id="exSeasonOutTr"> <td> <sky:datePicker name="ruleVO.exSeasonOut[${status.index}].fromDate,ruleVO.exSeasonOut[${status.index}].toDate" /> </td> </tr>
但是页面中需要可以通过js动态添加行,实现代码如下
$("exSeason").on("click",addRow); /* copy the tr(id) and append to the table, change the id、name of the new tr at the same time */ function addRow(id) { var tr = $(id); if(!tr.index) { tr.index = 0; } tr.index++; var newTr = tr.cloneNode(true); newTr.innerHTML = newTr.innerHTML.replace(/[\d]/g, tr.index); tr.parentElement.appendChild(newTr); }
看一下这行代码的效果:
newTr.innerHTML = newTr.innerHTML.replace(/[\d]/g, tr.index);
结果td的起始标签不见了,替换后只剩下td的结束标签,原因未知
然后试着将td的innerHTML进行替换
newTr.childNodes[0].innerHTML = newTr.childNodes[0].innerHTML.replace(/[\d]/g, tr.index);
调试一看,样式及一些自定义属性不见了
没办法,只能找出所有input,改变其id、name了
var inputs = newTr.$T("input"); for(var i=0;i<inputs.length;i++) { inputs[i].id = inputs[i].id.replace(/[\d]/g, tr.index); inputs[i].name = inputs[i].name.replace(/[\d]/g, tr.index); }
完美了?测试看看效果
点击最下面的时间选择控件,结果发现,其定位到了第一行中的tr上去了,newTr中元素绑定的事件都绑定到原始tr了,看来cloneNode(true)会拷贝元素在内存中的所有状态
还是老老实实的通过dom创建元素吧:
<fieldset> <legend> <div style="float:left;">季节</div> <div style="float:left;"> <input type="button" value="添加" onclick="addRow('seasonOutTr')"/></div> <div style="float:left;"> <input type="button" value="删除" onclick="deleteRow('seasonOutTr')"/></div></legend> <table width="100%" border="1" cellpadding="2" cellspacing="0" bordercolor="#cccccc" style="border-collapse:collapse"> <s:iterator value="ruleVO.seasonOut" var="seasonOut" status="status"> <s:hidden name="ruleVO.seasonOut[%{#status.index}].id" /> <tr id="seasonOutTr"> <td> <sky:datePicker name="ruleVO.seasonOut[${status.index}].fromDate,ruleVO.seasonOut[${status.index}].toDate" /> </td> </tr> </s:iterator> </table> </fieldset> /* copy the tr(id) and append to the table, change the id、name of the new tr at the same time */ function addRow(id) { var tr = $(id); if(!tr.index) { tr.index = 0; } tr.index++; var newTr = tr.cloneNode(true); //newTr.innerHTML = newTr.innerHTML.replace(/[\d]/g, tr.index); //newTr.childNodes[0].innerHTML = newTr.childNodes[0].innerHTML.replace(/[\d]/g, tr.index); var inputs = newTr.$T("input"); for(var i=0;i<inputs.length;i++) { inputs[i].id = inputs[i].id.replace(/[\d]/g, tr.index); inputs[i].name = inputs[i].name.replace(/[\d]/g, tr.index); if(inputs[i].id.indexOf("from") != -1) { inputs[i].onclick = function() { WdatePicker({ dateFmt:'yyyy-MM-dd', maxDate:'#F{$dp.$D(\'' + this.id.replace("from", "to") + '\')}' }); }; } else { inputs[i].onclick = function() { WdatePicker({ dateFmt:'yyyy-MM-dd', minDate:'#F{$dp.$D(\'' + this.id.replace("to", "from") + '\')}' }); }; } } tr.parentElement.appendChild(newTr); } function addCombineFaresRow(id) { var tr = $(id); if(!tr.index) { tr.index = 0; } tr.index++; var newTr = tr.cloneNode(true); var inputs = newTr.$T("input"); for(var i=0;i<inputs.length;i++) { inputs[i].id = inputs[i].id.replace(/[\d]/g, tr.index); inputs[i].name = inputs[i].name.replace(/[\d]/g, tr.index); if(inputs[i].id.indexOf("seqId") != -1) { inputs[i].value = tr.index+1; } } tr.parentElement.appendChild(newTr); } /* delete the table's last tr */ function deleteRow(id) { var tr = $(id); if(!tr.index || tr.index==0) { return; } var trs = tr.parentElement.childNodes; tr.parentElement.removeChild(trs[trs.length-1]); tr.index--; } function addTimeRow(id) { var table = $(id); var count = table.rows.length; var tr = table.insertRow(); var td = tr.insertCell(); var names = [id + "["+count+"].fromDate", id + "["+count+"].toDate"]; td.appendChild(Sky.createEl({ tag: "input", name: names[0], className: ["datePicker", "date"], onClick: function(){ WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\''+names[1]+'\')}'}); } })); td.appendChild(Sky.createText(" - ")); td.appendChild(Sky.createEl({ tag: "input", name: names[1], className: ["datePicker", "date"], onClick: function(){ WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\''+names[0]+'\')}'}); } })); }
OK,搞定......
发表评论
-
google浏览器书签账号登陆不上解决方案
2011-10-10 09:22 760问题: 最近google浏览器书签同步账号登陆不上 ... -
Dom多事件注册
2010-12-15 15:28 1170今天看到这样一段代码,如下: Page.clickFunc ... -
excanvas饼图实现
2010-10-21 15:04 2816代码比较简单,需要注意的一点就是: 如果想让饼图的边框显示出来 ... -
Tab键控制页面中元素获取焦点顺序
2010-08-19 17:35 4086修改默认Tab键按键触发,界面元素获取焦点的顺序 此方法 ... -
JS-自动提示组件
2010-08-19 17:23 1766注:源自Ajax实战 实现自动提示功能: <!DOCT ... -
js实现在图片上画矩形框
2010-08-18 16:10 10816JS组件: @author Darkness @versio ... -
JS控制输入字符长度
2009-11-09 10:50 5540<script language="Jav ... -
internet explorer 无法打开 Internet站点 已中止操作
2009-09-26 18:20 2145JavaScript使IE的经典异常 代码 http://ww ... -
fusioncharts相关问题
2009-09-26 15:59 1757中文问题 使用UTF-8 or GBK,X 轴正常, ... -
js日期时间函数
2009-09-20 17:28 1176Date.prototype.isLeapYear 判断闰 ... -
IE6 png 透明 (三种解决方法)
2009-09-14 14:49 2023FF和IE7已经直接支持透明的png图了,下面这个主要是解决I ... -
类似MSN的消息提示
2009-08-18 11:00 959<html> <head> ... -
IE6的“错误:53 存储空间不足,无法完成此操作”解决方法
2009-08-07 21:10 7980一法: 打开注册表, ... -
表格边框的隐藏
2009-08-07 09:19 2605代码如下: <html> <he ... -
JS操作VML
2009-08-03 14:52 2785可以用鼠标拖动这条线,效果如图: 说明:还有一些bug, ... -
javascript技巧大全 (3)
2009-03-06 12:36 1110... -
javascript技巧大全(2)
2009-03-06 12:33 1311进入页面<meta http-equiv="P ... -
javascript技巧大全(1)
2009-03-06 12:32 1161事件源对象 event.srcElement.tagName ... -
javascript性能优化
2009-02-27 10:56 4347很久就想总结一下关于javascript性能优化方面的一些东西 ... -
JavaScript DOM笔记:修改DOM
2009-02-27 10:51 2248常用函数: creat ...
相关推荐
在JavaScript中,DOM(文档对象模型)操作是实现网页动态交互的基础,而`cloneNode`方法是DOM操作中用于克隆节点的一个重要函数。了解`cloneNode`以及它在克隆文本节点时的使用技巧,对于进行DOM操作的前端开发者来...
在JavaScript中,`cloneNode()`方法是DOM(Document Object Model)操作中的一个重要功能,主要用于复制(克隆)DOM树中的节点及其属性。这对于创建复杂的用户界面或者动态调整页面内容时非常有用。 #### 一、...
本文实例讲述了DOM节点深度克隆函数cloneNode()用法。分享给大家供大家参考。 具体实现方法如下: 代码如下:<html> <head> [removed] function t(){ var nodeul = document.getElementsByTagName(...
在DOM中,有几个关键的数据类型: - **Node**:DOM树中的每个元素都是一个Node,包括元素节点、文本节点和属性节点。 - **Element**:表示DOM树中的HTML或XML元素。 - **Text**:表示DOM树中的文本节点。 - **...
- 在DOM中,XML文档被看作是一系列的节点,包括元素节点、属性节点、文本节点等。 - DOM提供了一套标准的方法,如`getElementsByTagName`,`getElementById`,`createNode`等,用于操作这些节点。 2. **XMLDOM...
"JS 中使用 DOM 复制(克隆)指定节点名数据到新的 XML 文件中的代码" 在本文中,我们将讨论如何使用 JavaScript 中的 DOM 来复制(克隆)指定节点名数据到新的 XML 文件中。这个过程涉及到三个重要的类:DOM...
在DOM中,`createElement()`和`createTextNode()`是最基础的创建新节点的方法。`createElement()`接受一个参数,即元素的标签名,如`<div>`、`<p>`等,返回一个表示该元素的节点对象。例如: ```javascript var ...
在这个chm格式的文件“XMLDOM对象方法手册”中,很显然包含了关于XMLDOM核心对象——XMLDocument的所有方法和属性的详尽指南。 XMLDocument对象是XMLDOM的核心,它是整个XML文档的根节点,代表了一个完整的XML文件...
9. **DOM2级和DOM3级接口**:学习高级的DOM操作,如`createDocumentFragment`、`cloneNode`、`compareDocumentPosition`等。 10. **HTML5新特性**:如果源码包含HTML5的相关示例,可能会涵盖`localStorage`、`...
`cloneNode(deep)`方法的使用如下: ```javascript let originalNode = document.getElementById('myNode'); let clonedNode = originalNode.cloneNode(deep); ``` 这里,`deep`参数决定了是进行深复制还是浅复制。 ...
在网页开发过程中,DOM操作是不可或缺的一部分,其中`cloneNode`方法用于复制DOM节点及其子节点。然而,当在Internet Explorer(尤其是版本8及以下)中使用`cloneNode`时,需要注意一些特定的行为,这些行为可能导致...
在JavaScript中,可以使用DOM API轻松创建新的节点,并将其添加到现有的DOM树中。例如,创建一个新的`<div>`元素并将其添加到页面上: ```javascript var newDiv = document.createElement("div"); newDiv.innerHTML...
可以创建一个新的XML文档,然后使用`CloneNode`方法复制原DOM树的一部分,并将其插入到新文档的根节点下。 导入联系人则相反,需要读取源XML文件,然后将其中的`<Contact>`节点逐一插入到现有的`<ContactDetails>`...
"JavaScript对DOM中各种类型的元素的常用操作" JavaScript 对 DOM 中各种类型的元素的常用操作是 JavaScript 编程中的一大根本任务。DOM 操作涉及到对不同类型的元素的操作,包括元素、属性、文本、注释、文档等。...
在DOM中,每个部分都是一个节点,包括元素、文本、注释、属性等。节点之间通过父子关系形成一棵树状结构,称为DOM树。例如,在提供的文档树中,NodeA是顶层节点,拥有三个子节点NodeA1、NodeA2和NodeA3。这些节点...
本文将根据书中的内容摘要,重点解析DOM提供的核心方法及其应用场景。 #### 二、创建节点 **1. `createElement()` 方法** `createElement()` 是一种用于创建新元素节点的方法。它接受一个参数——新元素的标签名...
7. **动态创建和操作DOM元素**: 文件中提到了通过JavaScript动态创建HTML元素的方法,例如使用`document.createElement()`创建元素,`appendChild()`添加元素,`removeChild()`删除元素,以及修改元素的属性和内容。...
1. **节点(Node)**: DOM中的每个部分都是一个节点,包括元素、属性、文本、注释等。每个节点都有类型、名称、值等属性,并可以通过这些属性与其他节点建立关系。 2. **元素节点(Element Node)**: 表示HTML或XML...