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


Posted in Javascript onFebruary 02, 2007

(一)
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;
}

Javascript 相关文章推荐
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
JS中Location使用详解
May 12 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
JavaScript使用cookie
Feb 02 #Javascript
如何判断图片地址是否失效
Feb 02 #Javascript
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 #Javascript
JavaScript 学习 - 提高篇
Feb 02 #Javascript
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 #Javascript
How to Auto Include a Javascript File
Feb 02 #Javascript
Code:loadScript( )加载js的功能函数
Feb 02 #Javascript
You might like
色色整理的PHP面试题集锦
2012/03/08 PHP
Gird事件机制初级读本
2007/03/10 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
VUE重点问题总结
2018/03/19 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
Python与Redis的连接教程
2015/04/22 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
python实现学生管理系统
2018/01/11 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
总结python中pass的作用
2019/02/27 Python
Django组件cookie与session的具体使用
2019/06/05 Python
Python内置函数及功能简介汇总
2020/10/13 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
英国现代绅士品牌:Hackett
2017/12/17 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
五年级学生评语
2014/04/22 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
python小程序之飘落的银杏
2021/04/17 Python
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
gateway网关接口请求的校验方式
2021/07/15 Java/Android
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle