首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery报表颜色:奇偶显示,鼠标悬停,点击固定颜色

2012-10-23 
jQuery表格颜色:奇偶显示,鼠标悬停,点击固定颜色//表格颜色处理:---------------------------------------

jQuery表格颜色:奇偶显示,鼠标悬停,点击固定颜色

//表格颜色处理:-------------------------------------------------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

热点排行