Highlight Data in different colors Using CSS

Use the below code in report query to highlight data with different colors based on conditions
CASE
           
WHEN (TRUNC(SYSDATE) > date_down AND date_down IS NOT NULL)
           
AND date_out IS NULL
              
THEN
‘Y’                              
—————RED COLOR
  
         WHEN (TRUNC(SYSDATE) >
date_out AND date_out IS NOT NULL)
           
AND complete_date IS NULL
              
THEN
‘Z’                              
———–GREEN COLOR
           
WHEN (TRUNC(SYSDATE) > complete_date AND complete_date IS NOT NULL)
           
AND date_start IS NULL
              
THEN
‘X’                              
——–ORANGE COLOR
           
WHEN (    TRUNC(SYSDATE) > date_start
              
   AND date_start IS NOT NULL
                 
AND ship_date IS NULL
                
)
           
AND date_complete IS NULL
              
THEN
‘P’                              
——–YELLOW COLOR
           
WHEN ((ship_date – TRUNC (SYSDATE) <= 2) AND ship_date IS NOT NULL
                
)
           
AND date_complete IS NULL
              
THEN
‘Q’                              
———BLUE COLOR
           
ELSE
‘N’                      
          ———GREY COLOR

         END css_style

Use the below Javascript code for coloring.

//function
to set css-bg color
function fn_css()
{
var i = 1;
var b,a,c,f;
while (i != 0) {
b = “000” + i;
b = pad(i, 4);
a = $(‘#f20_’+b).val(); //ID of CSS_STYLE column
c = “#f08_”+b; //ID of column to be highlighted
f = “f08_”+b;//date_out
g = “f10_”+b;//complete
h= “f12_”+b;//date_start
k= “f13_”+b;//date_complete
if (typeof a === “undefined”) {
i=0;
}
else
{
//alert(g);
if (a == ‘Y’) {
/*Appying bg color to the closest row with ID
f05_0001(first row, if 2nd row – f05_0002 and so on ) */
$(c).closest(“tr”).find(‘input[id=”‘+f+'”]’).css(“background-color”,”red”);
}
else if(a == ‘Z’) {
$(c).closest(“tr”).find(‘input[id=”‘+g+'”]’).css(“background-color”,”green”);
}
else if(a == ‘X’) {
$(c).closest(“tr”).find(‘input[id=”‘+h+'”]’).css(“background-color”,”orange”);
}
else if(a == ‘P’) {
$(c).closest(“tr”).find(‘input[id=”‘+k+'”]’).css(“background-color”,”yellow”);
}
else if(a == ‘Q’) {
$(c).closest(“tr”).children(“td”).css(“background-color”,”blue”);
}
i= i+1;
}
}
}

  • December 28, 2017 | 23 views
  • Comments