JS Mouse Over Cell(Row) Style Change

1.1 Requirement

In making a report, in order to highlight the cell the mouse moves over, we usually use JavaScript to change the background color and font size of the cell on mousehover or mousedown and go back to previous background color and font size on mouseout.

As shown in the figure below, when the mouse moves over the cell, the background color of the cell becomes red and the font size is enlarged. When the mouse is down, the background color of the cell returns to white.

Change the background color and font size of the row on mousehover and mousedown, as shown below:

1.2 Solution

Identify the cell or the row the mouse moves over and then change the background color and font size.

2.1 Sample 1: Restyle the cell the mouse moves over

1) Design the template as follows:

2) Click [Template]-[Web Attributes]-[Data Entry Preview], uncheck [Individually set for the template], and add a Load End event:

Input the following JavaScript codes:

// on mousemove
$(".x-table td").mousemove(function() {
// background color: red
        $(this).css("background-color","red");
// font size: 18px
        $(this).css("font-size","18px");
});
// on mousedown
$(".x-table td").mousedown(function() {
// background color: yellow
         $(this).css("background-color","yellow");
//font size: 18px        
         $(this).css("font-size","18px");
});
// on mouseout
$(".x-table td").mouseout(function() {
// background color: white
        $(this).css("background-color","white");
//font size: 12px 
        $(this).css("font-size","12px");
});

3) Click [Data Entry Preview] to see the effect:

2.2 Sample 2: Restyle the row the mouse moves over

Rewrite the JavaScript codes for the Load End event added in the above template:

// on mousemove
$(".x-table tr").mousemove(function() {
// background color: red
        $(this).css("background-color","red");
//font size: 18px
        $(this).find("td").css("font-size","18px");
});
// on mousedown
$(".x-table tr").mousedown(function() {
// background color: yellow
        $(this).css("background-color","yellow");
//font size: 18px        
        $(this).find("td").css("font-size","18px");
});
//on mouseout
$(".x-table tr").mouseout(function() {
// background color: white
        $(this).css("background-color","white");
//font size: 12px 
        $(this).find("td").css("font-size","12px");
});

Click [Data Entry Preview] to see the effect:

1) Sample 1: Restyle the cell the mouse moves over

1.cpt

2) Sample 2: Restyle the row the mouse moves over

2.cpt

Refer to the original link: https://help.finereport.com/doc-view-1907.html