JS realizes mult-line background color when mouse hovering

1. Expected effect

1) When previewing the template, it is hoped that when the mouse is hovering over the table, the background color of multiple rows can be changed at the same time, that is, the background color of multiple rows can be changed in a group.

2) You can customize whether to change the background color of the title row.

Take for example changing the background color every three rows except the title row, the effect is as shown in the figure below:

2. Realization

Add the JS loading end event in the Pagination Preview setting, define two parameters title_count and row_count, the former is the number of title rows that do not change color, and the latter is the color of every few rows.

1. Create a template

Create a new normal template, build a new dataset ds1:SELECT * FROM ORDERS

Design the report as shown in the figure below:

2. Add JS event

1) Add a "Pagination Preview>Loading End" event to the template as shown in the figure below.

2) The event setting needs to add two integer parameters title_count and row_count.

title_count: It is used to define the title row does not change color, set to n, then the mouse will hover over the first n rows when the template is previewed, and the first n rows will not change color.

row_count: Used to define the color change of every few rows, set to n, then every n rows will change color at the same time except for the title row.

The JavaScript code is as follows:

setTimeout(function() {
var move_color='#f0e229';
var out_color='#FFFFFF';
$(".x-table td").mousemove(function() {  
//alert('212');
    var titlecount = title_count;  
    var rowcount  = row_count;      
    var id  = $(this).attr("id");  
    var num=id.search("-");           
    var id1=id.substr(0,num).replace(/[^0-9]+/ig,"");    
    var id2=id.substr(num,id.length-num);  
    var flag = Math.ceil((id1-titlecount) / rowcount);
    var rowstart = (flag-1)*rowcount + 1+titlecount;
    var rowend = flag * rowcount + titlecount;
     if(id1>titlecount){
for(var i = rowstart;i<=rowend;i++){
var col1 = "A"+i+id2;
$('td[id^='+col1+']').parent('tr').find("td").css('background-color',move_color);
}
}
}); 
$(".x-table td").mouseout(function() {  
    var rowcount  = row_count;
    var titlecount = title_count;
    var id  = $(this).attr("id");  
    var num=id.search("-");  
    var id1=id.substr(0,num).replace(/[^0-9]+/ig,"");   
    var id2=id.substr(num,id.length-num);   
    var b = "A";
    //  alert(b);
    var flag = Math.ceil((id1-titlecount) / rowcount);
    var rowstart = (flag-1)*rowcount + 1 + titlecount;
    var rowend = flag * rowcount + titlecount;
if(id1>titlecount){
for(var i = rowstart;i<=rowend;i++){
var col1 = "A"+i+id2;
$('td[id^='+col1+']').parent('tr').find("td").css('background-color',out_color);
}
}
}); 
}, 100);

Note: To achieve the effect, you must ensure that all cells in column A of this template are not merged with other cells. You can empty column A and set conditions to hide the column width.

3. Preview effect

Save the template and click "Pagination Preview", the effect is shown in section I.1.

Note: Mobile terminal is not supported.

Refer to the completed template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\JS\JS_Muti-line_background_color.cpt

Click to download: 

JS_Multi-line_background_color.cpt