//表格颜色处理:-------------------------------------------------START
/*
说明:
$(function() {
_tableColorDecorator.initTableColor(tblIdArr, colorArr, captionRowspan, enableClickEvent, clickCount, clickColor);
});
tblIdArr: 要加色的table的id数组["table_id1", "table_id2"]
colorArr: 颜色数组[],依次是:表头颜色,偶数行,奇数行,mouseover,传""将使用默认颜色
captionRowspan:表头的行数,
enableClickEvent: 是否开启点击事件, 默认关闭
clickCount:传 1/2/"", 单击,双击,不启用
clickColor:颜色值,“”时候用默认颜色
*/
var _tableColorDecorator = {
captionColor: "#6492DD",
evenColor: "#F11FFF",
oddColor: "#aaFFFF",
mouseoverColor: "#FF1111",
clickColor: "FFFF11",
tmpColor: "#FFFFFF",
$clickedTr: null,
tmpClickColor: "#FFFFFF",
enableClickEvent: false,
clickCount: 1,
setCaptionTrColor: function($tbl, captionRowspan) {
$tbl.find("tr:lt(" + (captionRowspan) + ")").css("backgroundColor", _tableColorDecorator.captionColor);
},
setContentTrColor: function($tbl, captionRowspan) {
$tbl.find("tr:gt(" + (captionRowspan - 1) + "):even").css("backgroundColor", _tableColorDecorator.evenColor);
$tbl.find("tr:gt(" + (captionRowspan - 1) + "):odd").css("backgroundColor", _tableColorDecorator.oddColor);
},
bindEventHandler: function($tbl, captionRowspan) {
var $contentTrs = $tbl.find("tr:gt(" + (captionRowspan - 1) + ")");
$contentTrs.bind("mouseover", function() {
if(_tableColorDecorator.$clickedTr == null ||
(_tableColorDecorator.$clickedTr && _tableColorDecorator.$clickedTr.get(0).rowIndex != this.rowIndex)) {
_tableColorDecorator.tmpColor = $(this).css("backgroundColor");
$(this).css("backgroundColor", _tableColorDecorator.mouseoverColor);
}
});
$contentTrs.bind("mouseout", function() {
if(_tableColorDecorator.$clickedTr == null ||
(_tableColorDecorator.$clickedTr && _tableColorDecorator.$clickedTr.get(0).rowIndex != this.rowIndex)) {
$(this).css("backgroundColor", _tableColorDecorator.tmpColor);
}
});
if(_tableColorDecorator.enableClickEvent) {
var tmpEventName = _tableColorDecorator.clickCount == 1 ? "click" : "dblclick";
$contentTrs.bind(tmpEventName, function() {
if(_tableColorDecorator.$clickedTr == null) {
_tableColorDecorator.tmpClickColor = _tableColorDecorator.tmpColor;
$(this).css("backgroundColor", _tableColorDecorator.clickColor);
_tableColorDecorator.$clickedTr = $(this);
} else {
if(_tableColorDecorator.$clickedTr.get(0).rowIndex == this.rowIndex) {
$(this).css("backgroundColor", _tableColorDecorator.tmpClickColor);
_tableColorDecorator.$clickedTr = null;
} else {
_tableColorDecorator.$clickedTr.css("backgroundColor", _tableColorDecorator.tmpClickColor);
_tableColorDecorator.tmpClickColor = _tableColorDecorator.tmpColor;
$(this).css("backgroundColor", _tableColorDecorator.clickColor);
_tableColorDecorator.$clickedTr = $(this);
}
}
});
}
},
initVar: function(colorArr, enableClickEvent, clickCount, clickColor){
if(colorArr && colorArr.length == 4) {
_tableColorDecorator.captionColor = colorArr[0];
_tableColorDecorator.evenColor = colorArr[1];
_tableColorDecorator.oddColor = colorArr[2];
_tableColorDecorator.mouseoverColor = colorArr[3];
}
if(enableClickEvent && enableClickEvent != "") _tableColorDecorator.enableClickEvent = enableClickEvent;
if(clickCount && clickCount != "") _tableColorDecorator.clickCount = clickCount;
if(clickColor && clickColor != "") _tableColorDecorator.clickColor = clickColor;
},
initTableColor: function(tblIdArr, colorArr, captionRowspan, enableClickEvent, clickCount, clickColor) {
_tableColorDecorator.initVar(colorArr, enableClickEvent, clickCount, clickColor);
for(var i = 0; i < tblIdArr.length; i++) {
$tbl = $("#" + tblIdArr[i]);
if($tbl) {
_tableColorDecorator.setCaptionTrColor($tbl, captionRowspan);
_tableColorDecorator.setContentTrColor($tbl, captionRowspan);
_tableColorDecorator.bindEventHandler($tbl, captionRowspan);
}
}
}
}
//表格颜色处理:-------------------------------------------------END
分享到:
相关推荐
jquery页面顶部固定导航鼠标悬停显示下拉图标菜单代码 jquery页面顶部固定导航鼠标悬停显示下拉图标菜单代码 jquery页面顶部固定导航鼠标悬停显示下拉图标菜单代码 jquery页面顶部固定导航鼠标悬停显示下拉图标菜单...
【Jquery经典特效24】jQuery鼠标悬停向上滑出遮罩效果
任意鼠标悬停在四周的一个图片上,当前图片立即与中间的图片交换位置 注意:图片交换过程中,即动画执行过程中,鼠标再次悬停在别的图片位置上的时候,动画不会被执行 使用方法: 1、将css样式引入到你...
jQuery鼠标悬停图片遮罩动画显示特效 jQuery鼠标悬停图片遮罩动画显示特效
jquery微官网案例展示页面鼠标悬停显示二维码效果代码 jquery微官网案例展示页面鼠标悬停显示二维码效果代码 jquery微官网案例展示页面鼠标悬停显示二维码效果代码 jquery微官网案例展示页面鼠标悬停显示二维码效果...
jquery右侧固定层鼠标悬停微信图标显示二维码和页面滚动显示返.
代码简介:jQuery鼠标悬停图片震动特效是一款基于CSS3实现的圆形修边样式,配合jQuery实现的图片抖动特效
jquery鼠标悬停动态显示提示文字或者图片
鼠标悬停在图片上后,显示隐藏的另外一张图片,鼠标移走后返回之前图片,整个过程带有翻转效果 原理: 附件提供了7个单元的翻转效果,其原理只有一个,其他的只是相对定位绝对定位实现而已。 ...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
jquery鼠标悬停图片标题滑动 jquery鼠标悬停图片标题滑动
jQuery鼠标悬停图文切换显示特效 jQuery鼠标悬停图文切换显示特效 jQuery鼠标悬停图文切换显示特效 jQuery鼠标悬停图文切换显示特效 jQuery鼠标悬停图文切换显示特效
jquery 图片特效 鼠标悬停图片显示文字与标题内容特效 jquery 图片特效 鼠标悬停图片显示文字与标题内容特效 jquery 图片特效 鼠标悬停图片显示文字与标题内容特效
jQuery css3旅游网鼠标悬停图片文字动画效果 jQuery css3旅游网鼠标悬停图片文字动画效果
jquery文章列表排序(鼠标悬停显示图片以及详细介绍).rarjquery文章列表排序(鼠标悬停显示图片以及详细介绍).rarjquery文章列表排序(鼠标悬停显示图片以及详细介绍).rarjquery文章列表排序(鼠标悬停显示图片以及详细...
jquery hover鼠标悬停遮罩显示
jquery鼠标悬停 动态显示按钮效果
jQuery鼠标悬停不同文字显示不同背景图片banner动
jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示