兼容ie6及以上和firefox等标准浏览器的表格行滑过时背景色切换的效果
Posted 杨杨0708
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了兼容ie6及以上和firefox等标准浏览器的表格行滑过时背景色切换的效果相关的知识，希望对你有一定的参考价值。
一、js代码——"tablehover.js"
/**
*②、表格单元行滑过时高亮样式动效组件封装
*oop形式封装交互动效类
*组件说明这个组件是为了向下兼容到IE6，因为IE6不支持tr:hover这种形式的伪类,而在ff等标准浏览器中是支持的，这样写：
.tablelist td{border:none;border-bottom: 1px solid #d0d9d9;}//注意：td初始状态下是不给背景色的，滑过时才写
所以这段组件代码要开IETest6的环境下测试
.tablelist tr:hover td{background: #e2f3fe;color: #2d9ff1;}
*@param tableid 表格对象的上下文环境
*@param tdColor 滑过时单元格内字体的颜色值
*@param rowBgColor滑过时表格行背景色
*@param tdColorDefault 非滑过时单元格内字体的颜色
*@param rowBgColorDefault 非滑过状态下表格行背景色
*@param 或传入table对象 里面的配置属性写法是
*var tabdom = {// 配置对象的各个参数即可，再不用往构造器中传一堆参数了
tableid:‘tablelist‘,
hovercolor:‘#2d95f1‘,
hoverbgcolor:‘#e2f3fe‘,
defaultcolor:‘#333‘,
defaultbgcolor:‘#fff‘
};
*其整体调用写法是：
*var tb = new TableRowHover(tabdom);
// alert(tb instanceof TableRowHover);true证明tb是TableRowHover类的实例
tb.togglerow();
*
**/
function TableRowHover(table){
this.tableId = typeof table.tableid == ‘string‘?document.getElementById(table.tableid) : table.tableid;
// if (this.tableId) {alert(this.tableId)};//弹出[objectdivelement],证明获取到了父table节点了
this.tdColor = table.hovercolor;
this.rowBgColor = table.hoverbgcolor;
this.tdColorDefault = table.defaultcolor;
this.rowBgColorDefault = table.defaultbgcolor;
};
TableRowHover.prototype = {
togglerow:function(){
var that = this;
// alert(this.tableId.rows.length);
for(var i = 1;i<this.tableId.rows.length;i++){
var row = this.tableId.rows[i];
// console.log(row);
if (document.addEventListener) {//ff
// console.log(this.tableId.rows.length);//进来了
row.addEventListener(‘mouseover‘,function(e){
var ev = e || window.event; //注意：这里的写法，事件对象的获取只在事件紧跟着触发的事件句柄函数里面才能获取的到(生效),在句柄函数的子函数里面等情况是获取不到的，一定要注意这个坑，正确做法就是，现在父句柄函数里面获取到事件对象，再通过传参传入到子函数中即可
that.setRowColor(that,ev);
},false);
row.addEventListener(‘mouseout‘,function(e){
var ev = e || window.event;
that.setDefaultRowColor(that,ev);
},false);
} else if(document.attachEvent) {//IE6
// alert(this.tableId.rows.length);//这也进来了
row.attachEvent(‘onmouseover‘,function(e){
var ev = e || window.event;
that.setRowColor(that,ev);//这样传值后IE6终于搞定了
});
row.attachEvent(‘onmouseout‘,function(e){
var ev = e || window.event;
that.setDefaultRowColor(that,ev);
});
} else{
row.onmouseover = function(e){
var ev = e || window.event;
that.setRowColor(that,ev);
}
row.onmouseout = function(e){
var ev = e || window.event;
that.setDefaultRowColor(that,ev);
}
}
}
},
setRowColor:function(parent,ev){//传值设置表格行颜色
// console.log(parent.rowBgColor);//ok搞定，就是这样的父元素this引用的问题,在这里this看不见，只有当参数传进来才能引用父构造器里面的颜色属性
src = ev.srcElement || ev.target;
if (src.tagName == ‘TD‘) {
src.parentNode.style.backgroundColor = parent.rowBgColor;
var tds = src.parentNode.getElementsByTagName(‘td‘);
for(var i = 0;i<tds.length;i++){
tds[i].style.color = parent.tdColor;
}
};
},
setDefaultRowColor:function(parent,ev){//传值设置表格行颜色
// console.log(parent.rowBgColorDefault);//进来了
src = ev.srcElement || ev.target;
if (src.tagName == ‘TD‘) {
src.parentNode.style.backgroundColor = parent.rowBgColorDefault;
var tds = src.parentNode.getElementsByTagName(‘td‘);
for(var i = 0;i<tds.length;i++){
tds[i].style.color = parent.tdColorDefault;
}
};
}
}
[解析]:
1、第一个坑：row.addEventListener(‘mouseover‘,function(e){
var ev = e || window.event;
//注意：这里的写法，事件对象e的获取只在事件紧跟着触发的事件句柄函数里面才能获取的到(生效),在句柄函数的 子函数里面等情况是获取不到的，一定要注
意这个坑，正确做法就是，现在父句柄函数里面获取到事件对象，再通过传参传入到子函数中即可
that.setRowColor(that,ev);
最后在子函数里面获取事件源对象ev.srcElement，这是可以的
setRowColor:function(parent,ev){
src = ev.srcElement || ev.target;
...
2、第二个坑：就是父构造器的this指向的问题。
一般来说，父构造器中的this.属性在其原型的方法里面是能够直接看到并被引用的。
但是一旦遇到了事件触发，并需要再其事件的句柄函数中引用构造器this，那么这就不好使了,因为事件的句柄函数中的this默认是指向触发事件的元素的
togglerow:function(){
var that = this;
这时的解决办法只有将构造器this对象存入一个变量中，如上面的that,用that变量指向构造器的this，来调用构造器中定义的属性和原型方法
row.addEventListener(‘mouseover‘,function(e){
var ev = e || window.event;
that.setRowColor(that,ev);
},false);
3、优化：就是配置参数对象了，与其向构造器中传一长串参数，不如只传一个配置对象，如：*var tabdom = {// 配置对象的各个参数即可，再不用往构造器中传一堆参数了
tableid:‘tablelist‘,
hovercolor:‘#2d95f1‘,
hoverbgcolor:‘#e2f3fe‘,
defaultcolor:‘#333‘,
defaultbgcolor:‘#fff‘
};
*其整体调用写法是：
*var tb = new TableRowHover(tabdom);
那么构造器那边获取就这样写：
function TableRowHover(table){
this.tableId = typeof table.tableid == ‘string‘?document.getElementById(table.tableid) : table.tableid;
this.tdColor = table.hovercolor;
this.rowBgColor = table.hoverbgcolor;
this.tdColorDefault = table.defaultcolor;
this.rowBgColorDefault = table.defaultbgcolor;
};
二、html部分(验证上面js封装的效果)
<!-- 主体部分 -->
<div class="listfile">
<h1 class="list-title">文件草稿列表</h1>
<div class="btn-group clearfix">
<ul class="clearfix">
<li><a href="" style="background:#3091f0;color:#fff;"><i class="add-icon"></i><span class=‘icon-txt‘>新增</span></a></li>
<li><a href="">修改</a></li>
<li><a href="">删除</a></li>
<li><a href="">送盖章</a></li>
<li><a href="">查询</a></li>
</ul>
<span style="display:inline-block;height:34px;line-height:34px;padding-left:20px;color:#333;">当前显示的是2016-2-29后的公文，查询之前的公文请点击"查询"按钮</span>
</div>
<table border="0" cellspacing="0" cellpadding="0" class="tablelist" id="tablelist">
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
</colgroup>
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>文号</th>
<th>标题</th>
<th>发文单位</th>
<th>登记时间</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>某某某2016aaaaaaaa</td>
<td>湖北某某某企业某某某文件</td>
<td>某某某某某某某某某企业</td>
<td>2016-3-3 10:00:00</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>某某某2016aaaaaaaa</td>
<td>湖北某某某企业某某某文件</td>
<td>某某某某某某某某某企业</td>
<td>2016-3-3 10:00:00</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>某某某2016aaaaaaaa</td>
<td>湖北某某某企业某某某文件</td>
<td>某某某某某某某某某企业</td>
<td>2016-3-3 10:00:00</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>某某某2016aaaaaaaa</td>
<td>湖北某某某企业某某某文件</td>
<td>某某某某某某某某某企业</td>
<td>2016-3-3 10:00:00</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>某某某2016aaaaaaaa</td>
<td>湖北某某某企业某某某文件</td>
<td>某某某某某某某某某企业</td>
<td>2016-3-3 10:00:00</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>某某某2016aaaaaaaa</td>
<td>湖北某某某企业某某某文件</td>
<td>某某某某某某某某某企业</td>
<td>2016-3-3 10:00:00</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>某某某2016aaaaaaaa</td>
<td>湖北某某某企业某某某文件</td>
<td>某某某某某某某某某企业</td>
<td>2016-3-3 10:00:00</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>某某某2016aaaaaaaa</td>
<td>湖北某某某企业某某某文件</td>
<td>某某某某某某某某某企业</td>
<td>2016-3-3 10:00:00</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>某某某2016aaaaaaaa</td>
<td>湖北某某某企业某某某文件</td>
<td>某某某某某某某某某企业</td>
<td>2016-3-3 10:00:00</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>某某某2016aaaaaaaa</td>
<td>湖北某某某企业某某某文件</td>
<td>某某某某某某某某某企业</td>
<td>2016-3-3 10:00:00</td>
</tr>
</tbody>
</table>
<div class="pagebg">
<div class="page">
<ul class="clearfix">
<li class="pre_next"><a href="" class="pre_next">上一页</a></li>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li class="pre_next"><a href="" class="pre_next">下一页</a></li>
</ul>
</div>
</div>
</div>
.
.
.
<script type="text/javascript" src="./tablehover.js"></script>
<script type="text/javascript">
var tabdom = {//配置对象的各个参数即可，再不用往构造器中传一堆参数了
tableid:‘tablelist‘,
hovercolor:‘#2d95f1‘,
hoverbgcolor:‘#e2f3fe‘,
defaultcolor:‘#333‘,
defaultbgcolor:‘#fff‘
};
var tb = new TableRowHover(tabdom);
// alert(tb instanceof TableRowHover);true证明tb是TableRowHover类的实例
tb.togglerow();
</script>
以上是关于兼容ie6及以上和firefox等标准浏览器的表格行滑过时背景色切换的效果的主要内容，如果未能解决你的问题，请参考以下文章