兼容ie6及以上的表格行滑过时背景色切换的效果
;(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及以上的表格行滑过时背景色切换的效果的更多相关文章
- 兼容ie6及以上和firefox等标准浏览器的表格行滑过时背景色切换的效果
一.js代码——"tablehover.js" /** *②.表格单元行滑过时高亮样式动效组件封装 *oop形式封装交互动效类 *组件说明这个组件是为 ...
- CSS控制当鼠标滑过时更换图片的效果
鼠标滑过时更换图片的效果有很多方法可以实现,在本文将为大家介绍喜爱如何通过css来实现.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- [转载]使用兼容ie6 ie7 ie8 FF的text-overflow:ellips
使用兼容ie6 ie7 ie8 FF的text-overflow:ellipsis超出文本显示省略号来代替截取函数更有利于seo,如果使用截取函数,源代码中的标题是显示不完整的,即便是在title属性 ...
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
- css border制作小三角形状及气泡框(兼容IE6)
先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...
- jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6
http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...
- 兼容IE6\7\8浏览器的html5标签的几个方案
html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几 ...
- CSS三角的写法(兼容IE6)
目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...
随机推荐
- javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。
首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...
- 转 windows 下 Oracle 导出表结构
分析Oracle下导出某用户所有表的方法 可能很多使用Oracle的客户都会遇到想把某用户所有表导出的情况,本文就提供这样一个方法帮你轻松解决这个问题. 首先在sqlplus下以该用户登录到Ora ...
- FZU Problem 2214 Knapsack problem(背包+思维转换)
转化思维,把价值当成背包容量,选择最小的花费,从上到下枚举,找到当这个最小的花费. #include<iostream> #include<cstring> #include& ...
- Button MouseEvent颜色变化
public partial class Form1 : Form { public Form1() { InitializeComponent(); this.button1.Enter += bu ...
- 关于flex4 list 高度适应内容
Flex 4: Setting Spark List height to its content height How to set a Spark List height to the height ...
- 天梯赛决赛 L2-1.红色警报 并查集
L2-013. 红色警报 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 战争中保持各个城市间的连通性非常重要.本题要求你编写一 ...
- C#调用SCL2008 动态库SCL_API_cdecl.dll or SCL_API_Stdcall.dll,提示找不到指定模块
在公司用的联想 ThinkPad T430i,原装配置及系统,开机巨慢.按下开机键到登陆界面超过1分钟,再到桌面这个时间就难说了,多时有超过3分钟,进入桌面还要等待几分钟才能正常操作.新年过来向公司领 ...
- wget获取https资源
使用wget获取 https资源,缺省命令下是要使用证书,如果还未安装证书,可以选择忽略. 例如没有github.com的证书,执行如下命令 mkdir -p model cd model wget ...
- JS操作DOM对象——JS基础知识(四)
一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...
- web项目编译出错时,原因之一,可能是build path 中order and Export引起
build path中的order and Export,如果两个libarary中有相同功能的jar包,则编译器会选择顺序在前的jar包中相应的类作为编译所需. 所以,当项目jar包较多的时候,如果 ...