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

}

时间: 2024-09-26 11:10:34

使用JS操作页面表格,元素的一些技巧_基础知识的相关文章

js 操作select和option常用代码整理_基础知识

1.获取选中select的value和text,html代码如下: 复制代码 代码如下: <select id="mySelect"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </selec

js之WEB开发调试利器:Firebug 下载_基础知识

在米随随的Blog看到有关Firebug的介绍,遂下载试用了一下,确实是比较好的工具. 一.效果开发调试利器:Firebug 下载_基础知识-电工基础知识视频下载"> 二.主要功能 Inspect and edit HTML Tweak CSS to perfection Visualize CSS metrics Monitor network activity Debug and profile JavaScript Quickly find errors Explore the DO

Underscore.js 1.3.3 中文注释翻译说明_基础知识

// Underscore.js 1.3.3 // (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc. // Underscore is freely distributable under the MIT license. // Portions of Underscore are inspired or borrowed from Prototype, // Oliver Steele's Functional, and John Resig'

JS入门代码集合第1/4页_基础知识

 基础知识:HTML  JavaScript就这么回事1:基础知识    1 创建脚本块   1: <script language="JavaScript">   2: JavaScript code goes here   3: </script>    2 隐藏脚本代码   1: <script language="JavaScript">   2: <!--   3: document.write("Hel

在JS中操作时间之getUTCMilliseconds()方法的使用_基础知识

 javascript Date.getUTCMilliseconds()方法按照通用时间的返回指定日期的毫秒数.通过getUTCMilliseconds返回的值是在0和999之间的一个整数.语法 Date.getUTCMilliseconds() 下面是参数的详细信息:     NA 返回值: 返回按照通用时间指定日期的毫秒数.例子: 下面的例子打印的当前时间变量hrs的毫秒部分. <html> <head> <title>JavaScript getUTCMilli

在JavaScript中操作数组之map()方法的使用_基础知识

 JavaScript 数组map()方法创建一个新的数组使用调用此数组中的每个元素上所提供的函数的结果.语法 array.map(callback[, thisObject]); 下面是参数的详细信息:     callback : 从当前的元素函数产生新的数组的元素.     thisObject : 对象作为该执行回调时使用 返回值: 返回创建数组兼容性: 这种方法是一个JavaScript扩展到ECMA-262标准;因此它可能不存在在标准的其他实现.为了使它工作,你需要添加下面的脚本代码

js闭包引起的事件注册问题介绍_基础知识

背景:闲暇时间看了几篇关于js作用域链与闭包的文章,偶然又看到了之前遇到的一个问题,就是在for循环中为dom节点注册事件驱动,具体见下面代码: <!DOCTYPE html> <html> <head> <title>js闭包</title> <meta charset="utf-8" /> </head> <body> <button id="anchor1"&

js在IE与firefox的差异集锦_基础知识

1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了.如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替. 2.禁止选取网页内容: 在IE中一般用js:obj.onselectstart=function(){return false;} 而firefox用CSS:-moz-user-select:none

JavaScript的Backbone.js框架环境搭建及Hellow world示例_基础知识

环境准备在正式学习Backbone之前,你需要准备一些东西: 首先,你需要获取Backbone框架源文件:http://documentcloud.github.com/backbone/ Backbone依赖于Underscore框架的基础方法,因此,你同时需要下载Underscore框架的源文件:http://documentcloud.github.com/underscore/ 在Backbone中,对DOM和事件的操作依赖于第三方库(如jQuery或Zepto),你只需要选择其中一个下