`

DOM中cloneNode的使用之旅

F# 
阅读更多
struts2中可以自动封装表单提交过来的参数
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,搞定......



  • 大小: 22.7 KB
  • 大小: 20.1 KB
  • 大小: 29 KB
  • 大小: 29 KB
  • 大小: 56.5 KB
  • 大小: 23.3 KB
  • 大小: 49.5 KB
  • 大小: 26.9 KB
  • 大小: 42.6 KB
  • 大小: 102.1 KB
分享到:
评论

相关推荐

    javascript dom操作之cloneNode文本节点克隆使用技巧

    在JavaScript中,DOM(文档对象模型)操作是实现网页动态交互的基础,而`cloneNode`方法是DOM操作中用于克隆节点的一个重要函数。了解`cloneNode`以及它在克隆文本节点时的使用技巧,对于进行DOM操作的前端开发者来...

    javascript 拷贝节点cloneNode()使用介绍.docx

    在JavaScript中,`cloneNode()`方法是DOM(Document Object Model)操作中的一个重要功能,主要用于复制(克隆)DOM树中的节点及其属性。这对于创建复杂的用户界面或者动态调整页面内容时非常有用。 #### 一、...

    DOM节点深度克隆函数cloneNode()用法实例

    本文实例讲述了DOM节点深度克隆函数cloneNode()用法。分享给大家供大家参考。 具体实现方法如下: 代码如下:&lt;html&gt; &lt;head&gt; [removed] function t(){  var nodeul = document.getElementsByTagName(...

    html dom 底层 javascript

    在DOM中,有几个关键的数据类型: - **Node**:DOM树中的每个元素都是一个Node,包括元素节点、文本节点和属性节点。 - **Element**:表示DOM树中的HTML或XML元素。 - **Text**:表示DOM树中的文本节点。 - **...

    XMLDOM对象方法中文手册chm

    - 在DOM中,XML文档被看作是一系列的节点,包括元素节点、属性节点、文本节点等。 - DOM提供了一套标准的方法,如`getElementsByTagName`,`getElementById`,`createNode`等,用于操作这些节点。 2. **XMLDOM...

    js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码.docx

    "JS 中使用 DOM 复制(克隆)指定节点名数据到新的 XML 文件中的代码" 在本文中,我们将讨论如何使用 JavaScript 中的 DOM 来复制(克隆)指定节点名数据到新的 XML 文件中。这个过程涉及到三个重要的类:DOM...

    JavaScript DOM编程艺术 附录.pdf

    在DOM中,`createElement()`和`createTextNode()`是最基础的创建新节点的方法。`createElement()`接受一个参数,即元素的标签名,如`&lt;div&gt;`、`&lt;p&gt;`等,返回一个表示该元素的节点对象。例如: ```javascript var ...

    xmldom

    在这个chm格式的文件“XMLDOM对象方法手册”中,很显然包含了关于XMLDOM核心对象——XMLDocument的所有方法和属性的详尽指南。 XMLDocument对象是XMLDOM的核心,它是整个XML文档的根节点,代表了一个完整的XML文件...

    javascript DOM高级程序设计源码

    9. **DOM2级和DOM3级接口**:学习高级的DOM操作,如`createDocumentFragment`、`cloneNode`、`compareDocumentPosition`等。 10. **HTML5新特性**:如果源码包含HTML5的相关示例,可能会涵盖`localStorage`、`...

    教你javascript克隆dom结点,浅复制结点,深复制结点

    `cloneNode(deep)`方法的使用如下: ```javascript let originalNode = document.getElementById('myNode'); let clonedNode = originalNode.cloneNode(deep); ``` 这里,`deep`参数决定了是进行深复制还是浅复制。 ...

    IE下使用cloneNode注意事项分享

    在网页开发过程中,DOM操作是不可或缺的一部分,其中`cloneNode`方法用于复制DOM节点及其子节点。然而,当在Internet Explorer(尤其是版本8及以下)中使用`cloneNode`时,需要注意一些特定的行为,这些行为可能导致...

    JavaScriptDOM编程艺术.pdf

    在JavaScript中,可以使用DOM API轻松创建新的节点,并将其添加到现有的DOM树中。例如,创建一个新的`&lt;div&gt;`元素并将其添加到页面上: ```javascript var newDiv = document.createElement("div"); newDiv.innerHTML...

    C_技术:C#_中使用XML基于DOM的案例分析

    可以创建一个新的XML文档,然后使用`CloneNode`方法复制原DOM树的一部分,并将其插入到新文档的根节点下。 导入联系人则相反,需要读取源XML文件,然后将其中的`&lt;Contact&gt;`节点逐一插入到现有的`&lt;ContactDetails&gt;`...

    整理JavaScript对DOM中各种类型的元素的常用操作_.docx

    "JavaScript对DOM中各种类型的元素的常用操作" JavaScript 对 DOM 中各种类型的元素的常用操作是 JavaScript 编程中的一大根本任务。DOM 操作涉及到对不同类型的元素的操作,包括元素、属性、文本、注释、文档等。...

    dom培训资料,教程

    在DOM中,每个部分都是一个节点,包括元素、文本、注释、属性等。节点之间通过父子关系形成一棵树状结构,称为DOM树。例如,在提供的文档树中,NodeA是顶层节点,拥有三个子节点NodeA1、NodeA2和NodeA3。这些节点...

    JavaScript DOM编程艺术 附录

    本文将根据书中的内容摘要,重点解析DOM提供的核心方法及其应用场景。 #### 二、创建节点 **1. `createElement()` 方法** `createElement()` 是一种用于创建新元素节点的方法。它接受一个参数——新元素的标签名...

    JS中使用DOM来控制HTML元素.docx

    7. **动态创建和操作DOM元素**: 文件中提到了通过JavaScript动态创建HTML元素的方法,例如使用`document.createElement()`创建元素,`appendChild()`添加元素,`removeChild()`删除元素,以及修改元素的属性和内容。...

    DOM文档对象中文手册

    1. **节点(Node)**: DOM中的每个部分都是一个节点,包括元素、属性、文本、注释等。每个节点都有类型、名称、值等属性,并可以通过这些属性与其他节点建立关系。 2. **元素节点(Element Node)**: 表示HTML或XML...

Global site tag (gtag.js) - Google Analytics