I. Overview
1.1 Requirement
1) To change the color of a row on mouseover, you may use contentPane.makeHighlight('red','mouseover'), which, however, may fail in some cases:
If a cell is set, directly or through conditional formatting, with a background color, the cell will not change color on mouseover;
If a report is set to freeze, in a row/column, the frozen part and the non-frozen part will not change color simultaneously.
2) This article presents how to achieve the following effects:
When the mouse hovers, a row/column changes color
When the mouse hovers, a row and a column change color simultaneously
1.2 Solution
When the mouse hovers, first traverse the row to fetch the original background color of all cells in that row and then traverse again to modify the original color to a new one; the original background color is restored when the mouse moves away.
| You will learn |
|---|
|
II. Steps
Open Template, select [Template]-[Web Attributes]-[Pagination Preview], check “Individually set for the report” and then add a Load End event, as shown below:
2.1 Change row color
1) The entire row changes color on mouseover, as shown below:
Input the following JavaScript codes in the Load End event:
var background_color = "rgb(255,0,0)";
var click_background_color = "rgb(50,100,255)";
var frozen_back_color = new Array();
var back_color = new Array();
var click_frozen_back_color = new Array();
var click_back_color = new Array();
var $last_tr;
var $last_click_tr;
var i = 0;
var j = 0;
$(".x-table tr[id]").bind("mouseenter", function () {
if (typeof($last_tr) != "undefined") {
if (typeof($last_click_tr) == "undefined" || (typeof($last_click_tr) != "undefined" && $last_tr.attr("id") != $last_click_tr.attr("id"))) {
if (typeof($(this).attr("id")) != "undefined") {
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $last_tr.attr("id")).each(function () {
$(this).children("td").each(function () {
$(this).css("background-color", frozen_back_color[i][$(this).index()]);
});
i = i + 1;
});
i = 0;
}
else {
$last_tr.children("td").each(function () {
$(this).css("background-color", back_color[$(this).index()]);
});
}
frozen_back_color = [];
back_color = [];
}
}
}
if (typeof($(this).attr("id")) != "undefined" && (typeof($last_click_tr) == "undefined" || (typeof($last_click_tr) != "undefined" && $(this).attr("id") != $last_click_tr.attr("id")))) {
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $(this).attr("id")).each(function () {
frozen_back_color[i] = new Array();
$(this).children("td").each(function () {
frozen_back_color[i][$(this).index()] = $(this).css("background-color");
$(this).css("background-color", background_color);
});
i = i + 1;
});
i = 0;
}
else {
$(this).children("td").each(function () {
back_color[$(this).index()] = $(this).css("background-color");
$(this).css("background-color", background_color);
});
}
}
$last_tr = $(this);
});
$(".x-table tr[id]").bind("mousedown", function () {
if (typeof($last_click_tr) != "undefined") {
if ($(this).attr("id") != $last_click_tr.attr("id")) {
if (typeof($(this).attr("id")) != "undefined") {
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $last_click_tr.attr("id")).each(function () {
$(this).children("td").each(function () {
$(this).css("background-color", click_frozen_back_color[j][$(this).index()]);
});
j = j + 1;
});
j = 0;
}
else {
$last_click_tr.children("td").each(function () {
$(this).css("background-color", click_back_color[$(this).index()]);
});
}
click_frozen_back_color = [];
click_back_color = [];
}
}
}
if (typeof($(this).attr("id")) != "undefined" && (typeof($last_click_tr) == "undefined" || (typeof($last_click_tr) != "undefined" && $(this).attr("id") != $last_click_tr.attr("id")))) {
click_frozen_back_color = frozen_back_color.slice();
click_back_color = back_color.slice();
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $(this).attr("id")).each(function () {
$(this).children("td").each(function () {
$(this).css("background-color", click_background_color);
});
});
}
else {
$(this).children("td").each(function () {
$(this).css("background-color", click_background_color);
});
}
}
$last_click_tr = $(this);
}); 2) Color changes on mouseover/mousedown, as show below:
Input the following JavaScript codes in the Load End event:
var background_color = "rgb(255,0,0)";
var click_background_color = "rgb(50,100,255)";
var frozen_back_color = new Array();
var back_color = new Array();
var click_frozen_back_color = new Array();
var click_back_color = new Array();
var $last_tr;
var $last_click_tr;
var i = 0;
var j = 0;
$(".x-table tr[id]").bind("mouseenter", function() {
if (typeof($last_tr) != "undefined") {
if (typeof($last_click_tr) == "undefined" || (typeof($last_click_tr) != "undefined" && $last_tr.attr("id") != $last_click_tr.attr("id"))) {
if (typeof($(this).attr("id")) != "undefined") {
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $last_tr.attr("id")).each(function() {
$(this).children("td").each(function() {
$(this).css("background-color", frozen_back_color[i][$(this).index()]);
});
i = i + 1;
});
i = 0;
} else {
$last_tr.children("td").each(function() {
$(this).css("background-color", back_color[$(this).index()]);
});
}
frozen_back_color = [];
back_color = [];
}
}
}
if (typeof($(this).attr("id")) != "undefined" && (typeof($last_click_tr) == "undefined" || (typeof($last_click_tr) != "undefined" && $(this).attr("id") != $last_click_tr.attr("id")))) {
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $(this).attr("id")).each(function() {
frozen_back_color[i] = new Array();
$(this).children("td").each(function() {
frozen_back_color[i][$(this).index()] = $(this).css("background-color");
$(this).css("background-color", background_color);
});
i = i + 1;
});
i = 0;
} else {
$(this).children("td").each(function() {
back_color[$(this).index()] = $(this).css("background-color");
$(this).css("background-color", background_color);
});
}
}
$last_tr = $(this);
});
$(".x-table tr[id]").bind("mousedown", function() {
if (typeof($last_click_tr) != "undefined") {
if ($(this).attr("id") != $last_click_tr.attr("id")) {
if (typeof($(this).attr("id")) != "undefined") {
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $last_click_tr.attr("id")).each(function() {
$(this).children("td").each(function() {
$(this).css("background-color", click_frozen_back_color[j][$(this).index()]);
});
j = j + 1;
});
j = 0;
} else {
$last_click_tr.children("td").each(function() {
$(this).css("background-color", click_back_color[$(this).index()]);
});
}
click_frozen_back_color = [];
click_back_color = [];
}
}
}
if (typeof($(this).attr("id")) != "undefined" && (typeof($last_click_tr) == "undefined" || (typeof($last_click_tr) != "undefined" && $(this).attr("id") != $last_click_tr.attr("id")))) {
click_frozen_back_color = frozen_back_color.slice();
click_back_color = back_color.slice();
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $(this).attr("id")).each(function() {
$(this).children("td").each(function() {
$(this).css("background-color", click_background_color);
});
});
} else {
$(this).children("td").each(function() {
$(this).css("background-color", click_background_color);
});
}
}
$last_click_tr = $(this);
});
2.2 Change column color
Change the color of a column, as shown below:
Input the following JavaScript codes in the Load End event:
var background_color = "rgb(255,0,0)";
var back_color = new Array();
var last_col = "";
var current_col = "";
$(".x-table td[id]").bind("mouseenter", function () {
if (last_col != "") {
$("td[id^='" + last_col + "']").filter(function () {
if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == last_col) {
return $(this);
}
}).each(function () {
$(this).css("background-color", back_color[$(this).parent("tr").attr("tridx")]);
});
back_color = [];
last_col = "";
}
if (typeof($(this).attr("id")) != "undefined") {
current_col = $(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "");
$("td[id^='" + current_col + "']").filter(function () {
if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == current_col) {
return $(this);
}
}).each(function () {
back_color[$(this).parent("tr").attr("tridx")] = $(this).css("background-color");
$(this).css("background-color", background_color);
});
current_col = "";
}
});
$(".x-table td[id]").bind("mouseleave", function () {
if (typeof($(this).attr("id")) != "undefined") {
last_col = $(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "");
}
});
2.3 Change row and column color simultaneously
Change the color of a row and a column simultaneously, as shown below:
Input the following JavaScript codes in the Load End event:
var background_color = "rgb(255,0,0)";
var row_frozen_back_color = new Array();
var row_back_color = new Array();
var $last_tr;
var i = 0;
var col_back_color = new Array();
var last_col = "";
var current_col = "";
$(".x-table td[id]").bind("mouseenter", function () {
if (typeof($last_tr) != "undefined") {
if (typeof($(this).parent("tr").attr("id")) != "undefined") {
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $last_tr.attr("id")).each(function () {
$(this).children("td").each(function () {
$(this).css("background-color", row_frozen_back_color[i][$(this).index()]);
});
i = i + 1;
});
i = 0;
}
else {
$last_tr.children("td").each(function () {
$(this).css("background-color", row_back_color[$(this).index()]);
});
}
row_frozen_back_color = [];
row_back_color = [];
}
}
if (last_col != "") {
$("td[id^='" + last_col + "']").filter(function () {
if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == last_col) {
return $(this);
}
}).each(function () {
$(this).css("background-color", col_back_color[$(this).parent("tr").attr("tridx")]);
});
col_back_color = [];
last_col = "";
}
if (typeof($(this).attr("id")) != "undefined") {
current_col = $(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "");
$("td[id^='" + current_col + "']").filter(function () {
if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == current_col) {
return $(this);
}
}).each(function () {
col_back_color[$(this).parent("tr").attr("tridx")] = $(this).css("background-color");
});
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $(this).parent("tr").attr("id")).each(function () {
row_frozen_back_color[i] = new Array();
$(this).children("td").each(function () {
row_frozen_back_color[i][$(this).index()] = $(this).css("background-color");
$(this).css("background-color", background_color);
});
i = i + 1;
});
i = 0;
}
else {
$(this).parent("tr").children("td").each(function () {
row_back_color[$(this).index()] = $(this).css("background-color");
$(this).css("background-color", background_color);
});
}
$("td[id^='" + current_col + "']").filter(function () {
if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == current_col) {
return $(this);
}
}).each(function () {
$(this).css("background-color", background_color);
});
current_col = "";
}
});
$(".x-table td[id]").bind("mouseleave", function () {
if (typeof($(this).attr("id")) != "undefined") {
last_col = $(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "");
}
if (typeof($(this).parent("tr")) != "undefined") {
$last_tr = $(this).parent("tr");
}
});
2.4 Change row (excluding header) color
In some cases, color change on mouseover is expected to apply only to some cells, not to the header set as duplicate/frozen. As shown below, the mouse hovers over the first row, but the color does not change:
Solution: just make minor modifications to the JavaScript codes in the Load End event.
How to exclude the first row: Assuming the first row is Row N, modify the JavaScript codes from $(".x-table tr").bind("mouseenter", function () { } to $('.x-table tr:gt(0)') .bind("mouseenter", function () { }, and set row number N to start from 1.
Input the following JS codes:
var background_color = "rgb(255,0,0)";
var frozen_back_color = new Array();
var back_color = new Array();
var $last_tr;
var i = 0;
$('.x-table tr:gt(0)') .bind("mouseenter", function () {
if (typeof($last_tr) != "undefined") {
if (typeof($(this).attr("id")) != "undefined") {
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $last_tr.attr("id")).each(function () {
$(this).children("td").each(function () {
$(this).css("background-color", frozen_back_color[$(this).index()]);
});
i = i + 1;
});
i = 0;
}
else {
$last_tr.children("td").each(function () {
$(this).css("background-color", back_color[$(this).index()]);
});
}
frozen_back_color = [];
back_color = [];
}
}
if (typeof($(this).attr("id")) != "undefined") {
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $(this).attr("id")).each(function () {
frozen_back_color = new Array();
$(this).children("td").each(function () {
frozen_back_color[$(this).index()] = $(this).css("background-color");
$(this).css("background-color", background_color);
});
i = i + 1;
});
i = 0;
}
else {
$(this).children("td").each(function () {
back_color[$(this).index()] = $(this).css("background-color");
$(this).css("background-color", background_color);
});
}
}
});
$('.x-table tr:gt(0)') .bind("mouseleave", function () {
if (typeof($(this).attr("id")) != "undefined") {
$last_tr = $(this);
}
});
Previous：JS Change the Background Color of a Clicked Row
