I. Overview
1.1 Requirement
In a report block, click a cell to change the background color and click it again to restore the background color.
1.2 Solution
The following solution applies:
However, the solution cannot restore the cell color. Add an After Initialization event to a report block, use the function setTimeOut to define a click event by setting the background color after clicking on the cell and the restored background color respectively, and set the background color according to the cell color when clicking.
II. Sample
2.1 Design a report
1) Create a new decision-making report and a new dataset ds1:
SELECT * FROM Sales_Volume
2) Drag a report block into the decision-making report, with the report block designed as follows:
2.2 Add an After Initialization event
Add an After Initialization event to the report block, as shown below:
Input the JS code:
setTimeout(function() {
//background color variables when selected
var oldColor = "rgb(255, 255, 255)";
var newColor = "rgb(255, 0, 0)";
$('.x-table td').click(function() {
if($(this).css('background-color') != newColor) {
$(this).css('background', newColor);
} else if($(this).css('background-color') == newColor) {
$(this).css('background', oldColor);
}
});
}, 1000);
To retain the color of a row, input the following JS code:
setTimeout(function() {
//background color variables when selected
var oldColor = "rgb(255, 255, 255)";
var newColor = "rgb(255, 0, 0)";
$('.x-table td').click(function() {
$(this).css('background', newColor).siblings().css("background",oldColor);
});
}, 1000);III. Preview
Save the templates and select [Dashboard Preview]. The preview effect is as shown below:
Previous：JS Click Dashboard to Display in Full Screen
