使用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 dom 基本操作小结
Apr 11 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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静态类的原罪详解
2013/05/06 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
Javascript Math对象
2009/08/13 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
javascript实现拖放效果
2015/12/16 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
python机器人运动范围问题的解答
2019/04/29 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
企业统计员岗位职责
2013/12/13 职场文书
电子商务专业个人的自我评价
2013/12/19 职场文书
质检部职责
2013/12/28 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
预备党员综合考察材料
2014/05/31 职场文书
支部书记四风对照材料
2014/08/28 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书