兼容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浏览器 造成这样 ...
随机推荐
- 关于oracle 还原数据库的要领
create tablespace DSXZFW datafile 'D:\yangk\oraclespace\DSXZFW.ora' size 1000m; // 创建表空间,注意如果要还原数据库的 ...
- typescript中的工具 tsd
首先帮微软买个广告:VSCode 实在是太适合我了,感觉写起来无比舒畅,建议有兴趣的可以去试试用vsCode写前端. 最近开始使用ts去构建项目,感觉写起来非常的爽(本人以前接触过c#和java),终 ...
- asp Vernum
使用ASP加密算法加密你的数据(一) 简介 首先简单介绍一下有关加密的背景.由于美国禁止几种密码算法的对外出口的加密位数(例如SSL的40位加密限制),本文将介绍一种ASP可以使用的简单字符加密 ...
- 考分鄙视(exam)
考分鄙视(exam) 题目描述 Whence这个学期考了n次试,每一次都有一个0-20000之间的整数分数.Whence本来的状态应该是每一次考试都比前一次多一分(除第一次),但由于他很不稳定,偏差可 ...
- PAT (Advanced Level) 1008. Elevator (20)
简单模拟. 注意a[i]==a[i-1]的情况. #include<iostream> #include<cstring> #include<cmath> #inc ...
- Jobject 使用
obj2 = JObject.Parse(result.Html); JArray _Jarr = _obj["data"]["siteList"].Value ...
- JDBC 数据库连接池
http://www.cnblogs.com/lihuiyy/archive/2012/02/14/2351768.html JDBC 数据库连接池 小结 当对数据库的访问不是很频繁时,可以在每次 ...
- Apriori算法第一篇
摘要: Apriori算法是产生k项高频项目组的一般手段.算法概要:首先产生k项高频项目集合Lk,自身链接形成k+1项的项目结合C(k+1),然后剪枝(去掉以前去掉的不满足支持度的高频),生成K=1项 ...
- iOS两个关于对象的关键字
标签: swift新特性(__nullable和__nonnull) 最近在看老师写代码的时候经常遇到两个陌生的关键字,但是当我在我的电脑上敲得时候就是敲不出,后来才知道这是为了swift与OC混编的 ...
- openstack controller ha测试环境搭建记录(七)——配置glance
在所有集群安装glance软件:yum install -y openstack-glance python-glanceclient 在任一节点创建glance用户:mysql -u root -p ...