使用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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
input按钮的事件处理大全
Dec 10 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
功能完善的小程序日历组件的实现
Mar 31 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 URL参数获取方式的四种例子
2014/02/28 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
js验证表单第二部分
2006/11/25 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
javascript如何实现create方法
2019/11/04 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python中字典和集合学习小结
2017/07/07 Python
基于python实现名片管理系统
2018/11/30 Python
python实现简单多人聊天室
2018/12/11 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
wxPython实现整点报时
2019/11/18 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
毕业学生推荐信
2013/12/01 职场文书
生产总经理岗位职责
2013/12/19 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
家长给老师的感谢信
2015/01/20 职场文书