`

IE下cloneNode(true)一个TR取其.cells[index]报 'cells.[index].firstChild'为空或不是对象

阅读更多
下列js代码,报“'cells.4.firstChild'为空或不是对象”:
var templateRow = copiedTable.firstChild.lastChild;
var newRow = templateRow.cloneNode(true);
newRow.style.display = "block";
var refRow = copiedTable.firstChild.firstChild.nextSibling //insertBefore()的参照行

///alert(newRow.cells[4])  ////为“undefined”
newRow.cells[4].firstChild.value = curSrcRow.cells[4].firstChild.nodeValue;
            
///set curSrcRow's values to newRow
copyPloValues(newRow, curSrcRow);

///插入新行
if(refRow) {
    copiedTable.firstChild.insertBefore(newRow, refRow);
} else {
    copiedTable.firstChild.appendChild(newRow);
}


得知,IE下(firefox/opera/chrome下无此问题,见下面的链接二),cloneNode(true)克隆出的table的tr,在未插入到DOM tree成为其一部分之前,其cells[]是不可用的。(In IE,It turns out that the .cells[] accessor is only available after you append the row into the DOM tree)

参见:
.rows[] and .cells[] in IE when using cloneNode():
http://jehiah.cz/a/rows-and-cells-in-ie-when-using-clonenode
A cloned (cloneNode) table row element (<tr>) stops beeing a table row element in IE:
http://www.reingroot.nl/bugreports/js/javascript/cloneRowInIE.html

解决办法正如上述链接一所述,调换新行插入代码(insertBefore()/appendChild())与取新行cells[]代码块的顺序:
var templateRow = copiedTable.firstChild.lastChild;
var newRow = templateRow.cloneNode(true);
newRow.style.display = "block";
var refRow = copiedTable.firstChild.firstChild.nextSibling //insertBefore()的参照行
            
///set curSrcRow's values to newRow
copyPloValues(newRow, curSrcRow);

///插入新行
if(refRow) {
    copiedTable.firstChild.insertBefore(newRow, refRow);
} else {
    copiedTable.firstChild.appendChild(newRow);
}

//alert(newRow.cells[4] + ' ' + newRow.cells[4].nodeName);  ////为“[object] TD”
newRow.cells[4].firstChild.value = curSrcRow.cells[4].firstChild.nodeValue;
分享到:
评论

相关推荐

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

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

    IE下使用cloneNode注意事项分享

    `cloneNode`方法接收一个布尔值参数`include_all`或`deep`,当设置为`true`时,它会创建节点的深度拷贝,包括所有子节点。问题在于,`script`标签同样被视为DOM节点,因此在克隆包含`script`的节点时,浏览器可能会...

    JavaScript Table行定位效果

    接着想到的是给table插入一个新tr,克隆原来的tr,并设置这个tr为fixed(ie6为absolute),例如: Code &lt;!DOCTYPE ...

    DOM对象.docx

    1. **Document(文档)**:创建一个网页并将其添加到Web中时,DOM会基于这个网页创建一个文档对象。文档对象是DOM的基础,没有文档对象就没有DOM的存在。 2. **Object(对象)**:在DOM中,对象是一种独立的数据...

    Js内置对象.docx

    在DOM中,每一个节点都可以被视为一个`Node`对象。这些对象具有许多通用属性和方法。 - **documentElement**: 获取文档的根节点。 - **attributes**: 获取元素的所有属性。 - **childNodes**: 获取元素的所有子节点...

    JavaScript 用cloneNode方法克隆节点的代码

    很多时候我们会用for 来生成多个结构... 这个方法只有一个参数deep,布尔值,如果为true,则克隆oldElement 这个及其子节点,否则只可能这个节点本身。 返回值就是一个克隆的节点newElement。 以下是测试代码,test.htm

    js解析XML常用对象、属性、方法

    - `nextSibling`: 返回当前节点的下一个同级节点。 - `nodeName`: 返回节点名称。 - `nodeType`: 返回节点类型。 - `nodeValue`: 返回节点值。 - `ownerDocument`: 返回包含该节点的文档对象。 - `parentNode`: 返回...

    javascript兼容性总结 转.doc

    五、BOM(浏览器对象模型)1.window.location【分析说明】在 IE 中,`window.location` 可以被赋值为一个 URL 字符串,但在 Firefox 中需要使用 `window.location.href`。 ```javascript // IE window.location = '...

    XMLDOM对象方法手册

    - `node.cloneNode(deep)`: 克隆节点,`deep`为true时连同子节点一起克隆。 - `node.getElementsByTagName(tagName)`: 根据标签名查找所有子节点。 - `node.getAttribute(name)`: 获取元素的属性值。 - `node....

    DOM的基本方法.txt

    如果文档中不存在这样的元素,则返回一个空集合。 **示例**: ```javascript const elements = document.getElementsByTagName('span'); ``` 这将返回文档中所有的`&lt;span&gt;`元素组成的HTMLCollection对象。 --- ##...

    XMLDOM对象方法中文手册chm

    - `nextSibling`和`previousSibling`属性:获取当前节点的下一个或上一个兄弟节点。 5. **DOM修改** - `insertBefore`:在指定子节点之前插入新的子节点。 - `replaceChild`:替换已有的子节点。 - `cloneNode`...

    Javascript操作XML和HTML

    在示例中,创建了一个XML字符串,并通过JavaScript将其转换为DOM对象,然后使用各种属性和方法来访问和操作DOM树。 - `root.xml`:获取并显示整个根元素的XML文本。 - `root.text`:获取并显示根元素及其子元素的...

    Opera下cloneNode的bug

    在前端开发中,浏览器兼容性始终是一个不可忽视的重要议题。Opera作为一款A-Grade级别的浏览器,虽然在很多方面表现出色,但与其他浏览器一样,也存在一些特有的问题。这里我们要讨论的是一个与`cloneNode`方法相关...

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

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

    Delphi向XML中添加节点数据.rar

     iNode2 := iNode.cloneNode (True);  iRoot.appendChild (iNode2);  iAttribute := iXml.createAttribute ('color');  iAttribute.nodeValue := 'red';  iNode2.attributes.setNamedItem (iAttribute);  Memo...

    javascript节点属性和方法

    10. nextSibling:返回当前节点的下一个兄弟节点(只读) 11. nodeName:返回节点的名字(只读) 12. nodeType:返回节点的类型(只读) 13. nodeTypedValue:存储节点值(可读写) 14. nodeValue:返回节点的文本...

    javascript cloneNode()方法的使用

    这个函数获取到id为`container`的元素和`text`的段落元素,然后调用`cloneNode(true)`来创建一个包含子节点的`text`元素的副本,并将其添加到`container`元素中。 总结来说,JavaScript的cloneNode()方法是一个非常...

    XML_学习之总结[知识整理.doc

    - 此方法创建一个空的文档片段对象,但不会将其自动添加到文档树中。要将文档片段添加到文档树中,必须使用插入方法,如 `insertBefore`、`replaceChild` 或 `appendChild`。 **使用示例**: ```javascript // 创建...

Global site tag (gtag.js) - Google Analytics