I. Overview
1.1 Requirement
In report production, sometimes in order to highlight the cell selected, it is necessary to highlight the background, and restore it to the original background when the mouse moves away, as shown below:
1.2 Solution
Meet the requirement by setting a Loading End event.
II. Sample
2.1 Design a template
To verify the universal applicability of the solution, set the background color of C3 as #FFCC00 and set that of D3 as #CC99FF:
2.2 Set a Loading End event
Click Template> Web Attributes>Data Entry Settings, select Individually set for the template, uncheck Set background of the row being edited, and add a Loading End event, as shown below:
Note
The options [Set background of the row being edited] and [Set background of the cell] cannot be modified at the same time, for there will be conflicts. Choose either one as needed in actual scenarios.
Input the JS code:
var $lasttd;// Variables of the previous cell
var lastcolor;// Variables of the previous color settings
$('.x-table td').click(function(){
if($lasttd){
$lasttd.css('background',lastcolor);
}//Restore to the original background when the mouse moves awaylast
color=$(this).css('background-color');
if(!lastcolor)lastcolor=$(this).css('background');// Save the original background
$(this).css('background','red');// Set the background of the current cell as red
$lasttd=$(this);//Save the settings of the previous cell});
2.3 Preview
Save the template and select [Data Entry Preview]:
Previous：JS Button color change according to mouse hover
