使用JS操作页面表格,元素的一些技巧

 

（一）

 

 

ie

、

firefox

以及其它浏览器对于

 table

标签的操作都各不相同，在

ie

中不允许对

table

和

tr

的

innerHTML

赋值，

使用

js

增加一个

tr

时，

使用

appendChile

方法也不管用。

下面是

我就三种浏览器测试的结果：

 

 

insertRow

 

 

IE6 :

支持

,

而且默认参数为

-1,

默认添加到最后

 

 

FireFox :

支持

,

但部支持默认参数

 

 

Opera :

支持

,

支持默认参数

,

默认添加到最前

 

 

 

AppendChild

 

 

IE6 :

不支持

 

 

FireFox :

支持

,

但增加

TR

后不影响

ROWS

 

Opera :

支持

,

效果同

insertRow(-1),

影响

ROWS 

 

最大限度的遵循规范，就能写出安全的、适用性强的代码了

: 

 

//

向

table

追加一个空行：

 

var otr = otable.insertRow(-1);

var otd = document.createElement("td");

otd.innerHTML = " "; 

otd.className = "XXXX"; 

otr.appendChild(otd); 

 

这样就可以运行在这三种浏览器上了

 

 

（三）

childNodes

的操作

 

 

（

1

）属性

nodeName

 

Utils.getChildrenByTagName = function (node, tagName) {

    var ln = node.childNodes.length;

    var arr = [];

    for (var z = 0; z < ln; z++) {

 

 

 

 

        if (node.childNodes[z].nodeName == tagName) {

            arr.push(node.childNodes[z]);

        }

    }

    return arr;

};

 

（

2

）属性

id

 

function getNodeID(parent, id) {

    var ln = parent.childNodes.length;

    for (var z = 0; z < ln; z++) {

        if (parent.childNodes[z].id == id) {

            return parent.childNodes[z];

        }

    }

    return null;

}

（

3

）属性

className

 

对应

class,

如

 <tr class="class1">

 

 function getElementsByClassName(node, className) {

    var children = node.getElementsByTagName("*");

    var elements = new Array();

    for (var i = 0; i < children.length; i++) {

        var child = children[i];

        var classNames = child.className.split(" ");

        for (var j = 0; j < classNames.length; j++) {

            if (classNames[j] == className) {

                elements.push(child);

                break;

            }

        }

    }

    return elements;

}