;(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. javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。

    首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...

  2. 转 windows 下 Oracle 导出表结构

      分析Oracle下导出某用户所有表的方法 可能很多使用Oracle的客户都会遇到想把某用户所有表导出的情况,本文就提供这样一个方法帮你轻松解决这个问题. 首先在sqlplus下以该用户登录到Ora ...

  3. FZU Problem 2214 Knapsack problem(背包+思维转换)

    转化思维,把价值当成背包容量,选择最小的花费,从上到下枚举,找到当这个最小的花费. #include<iostream> #include<cstring> #include& ...

  4. Button MouseEvent颜色变化

    public partial class Form1 : Form { public Form1() { InitializeComponent(); this.button1.Enter += bu ...

  5. 关于flex4 list 高度适应内容

    Flex 4: Setting Spark List height to its content height How to set a Spark List height to the height ...

  6. 天梯赛决赛 L2-1.红色警报 并查集

    L2-013. 红色警报 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 战争中保持各个城市间的连通性非常重要.本题要求你编写一 ...

  7. C#调用SCL2008 动态库SCL_API_cdecl.dll or SCL_API_Stdcall.dll,提示找不到指定模块

    在公司用的联想 ThinkPad T430i,原装配置及系统,开机巨慢.按下开机键到登陆界面超过1分钟,再到桌面这个时间就难说了,多时有超过3分钟,进入桌面还要等待几分钟才能正常操作.新年过来向公司领 ...

  8. wget获取https资源

    使用wget获取 https资源,缺省命令下是要使用证书,如果还未安装证书,可以选择忽略. 例如没有github.com的证书,执行如下命令 mkdir -p model cd model wget ...

  9. JS操作DOM对象——JS基础知识(四)

    一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...

  10. web项目编译出错时,原因之一,可能是build path 中order and Export引起

    build path中的order and Export,如果两个libarary中有相同功能的jar包,则编译器会选择顺序在前的jar包中相应的类作为编译所需. 所以,当项目jar包较多的时候,如果 ...