使用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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
vue弹出框组件封装实例代码
Oct 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实现每日签到功能
2018/11/29 PHP
PHP递归的三种常用方式
2019/02/28 PHP
JS解析XML的实现代码
2009/11/12 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python递归函数绘制分形树的方法
2018/06/22 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
临床护士自荐信
2014/01/31 职场文书
聘用意向书范本
2014/04/01 职场文书
学校捐书倡议书
2015/04/27 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
解析Java中的static关键字
2021/06/14 Java/Android