使用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;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值