;(function(window){
    var tb = document.getElementById('tablelist');
    function trfocus(){//为了兼容IE6在css中td不要设置背景颜色,否则会遮挡住tr背景颜色的变换.在标准浏览器中可以直接用样式控制鼠标滑过时,切换表格行背景色的效果,代码是:
    //.tablelist tr:hover td{background: #e2f3fe;color: #2d9ff1;}
        var e = event.srcElement || event.target;
        if (e.tagName == 'TD') {//e.parentNode就是tr
            e.parentNode.style.backgroundColor = '#e2f3fe';
            var tds = e.parentNode.getElementsByTagName('td');
            for(var i = 0;i<tds.length;i++){
                tds[i].style.color = '#2d95f1';
            }
            // e.style.color = '#2d95f1';当前td
        };
    }
    function trblur(){
        var e = event.srcElement || event.target;
        if (e.tagName == 'TD') {
            e.parentNode.style.backgroundColor = '#fff';
            var tds = e.parentNode.getElementsByTagName('td');
            for(var i = 0;i<tds.length;i++){
                tds[i].style.color = '#333';
            }
        };
    }
    for(var i = 1;i<tb.rows.length;i++){
        var row = tb.rows[i];
        if (document.addEventListener) {
            row.addEventListener('mouseover',trfocus,false);
            row.addEventListener('mouseout',trblur,false);
        } else if(document.attachEvent) {
            row.attachEvent('onmouseover',trfocus);
            row.attachEvent('onmouseout',trblur);
        } else{
            row.onmouseover = function(){
                trfocus();
            }
            row.onmouseout = function(){
                trblur();
            }
        }
    }
})(window);

//小结:js原生中的事件方法addEventListener()以及样式编程dom.style....等只对单个元素或DOM节点起效果,对于标签集来说就要用for循环来获取单个元素才能绑定事件方法和样式编程属性。

兼容ie6及以上的表格行滑过时背景色切换的效果的更多相关文章

  1. 兼容ie6及以上和firefox等标准浏览器的表格行滑过时背景色切换的效果

    一.js代码——"tablehover.js" /**      *②.表格单元行滑过时高亮样式动效组件封装      *oop形式封装交互动效类      *组件说明这个组件是为 ...

  2. CSS控制当鼠标滑过时更换图片的效果

    鼠标滑过时更换图片的效果有很多方法可以实现,在本文将为大家介绍喜爱如何通过css来实现.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...

  3. html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  4. [转载]使用兼容ie6 ie7 ie8 FF的text-overflow:ellips

    使用兼容ie6 ie7 ie8 FF的text-overflow:ellipsis超出文本显示省略号来代替截取函数更有利于seo,如果使用截取函数,源代码中的标题是显示不完整的,即便是在title属性 ...

  5. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

  6. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  7. jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

    http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...

  8. 兼容IE6\7\8浏览器的html5标签的几个方案

    html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几 ...

  9. CSS三角的写法(兼容IE6)

    目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...

随机推荐

  1. 关于oracle 还原数据库的要领

    create tablespace DSXZFW datafile 'D:\yangk\oraclespace\DSXZFW.ora' size 1000m; // 创建表空间,注意如果要还原数据库的 ...

  2. typescript中的工具 tsd

    首先帮微软买个广告:VSCode 实在是太适合我了,感觉写起来无比舒畅,建议有兴趣的可以去试试用vsCode写前端. 最近开始使用ts去构建项目,感觉写起来非常的爽(本人以前接触过c#和java),终 ...

  3. asp Vernum

    使用ASP加密算法加密你的数据(一) 简介    首先简单介绍一下有关加密的背景.由于美国禁止几种密码算法的对外出口的加密位数(例如SSL的40位加密限制),本文将介绍一种ASP可以使用的简单字符加密 ...

  4. 考分鄙视(exam)

    考分鄙视(exam) 题目描述 Whence这个学期考了n次试,每一次都有一个0-20000之间的整数分数.Whence本来的状态应该是每一次考试都比前一次多一分(除第一次),但由于他很不稳定,偏差可 ...

  5. PAT (Advanced Level) 1008. Elevator (20)

    简单模拟. 注意a[i]==a[i-1]的情况. #include<iostream> #include<cstring> #include<cmath> #inc ...

  6. Jobject 使用

    obj2 = JObject.Parse(result.Html); JArray _Jarr = _obj["data"]["siteList"].Value ...

  7. JDBC 数据库连接池

    http://www.cnblogs.com/lihuiyy/archive/2012/02/14/2351768.html JDBC 数据库连接池 小结   当对数据库的访问不是很频繁时,可以在每次 ...

  8. Apriori算法第一篇

    摘要: Apriori算法是产生k项高频项目组的一般手段.算法概要:首先产生k项高频项目集合Lk,自身链接形成k+1项的项目结合C(k+1),然后剪枝(去掉以前去掉的不满足支持度的高频),生成K=1项 ...

  9. iOS两个关于对象的关键字

    标签: swift新特性(__nullable和__nonnull) 最近在看老师写代码的时候经常遇到两个陌生的关键字,但是当我在我的电脑上敲得时候就是敲不出,后来才知道这是为了swift与OC混编的 ...

  10. openstack controller ha测试环境搭建记录(七)——配置glance

    在所有集群安装glance软件:yum install -y openstack-glance python-glanceclient 在任一节点创建glance用户:mysql -u root -p ...