Color Cell/Row/Column in an Interactive Report

Step-1 : Create a new page.

You must be select Interactive Report.

--> SQL Query :

SELECT EMPLOYEE_ID,FULLNAME,F_DEPT(DEPARTMENT_ID) DEPARTMENT,BASIC_SALARY,

         CASE WHEN BASIC_SALARY <= 15000 THEN 'data-style="background-color:green"' 

            WHEN BASIC_SALARY > 15000 AND BASIC_SALARY <= 20000 THEN 'data-style="background-color:orange"'

            WHEN BASIC_SALARY > 20000 THEN 'data-style="background-color:red"'

          ELSE NULL

         END css_style,

       GROSS_SALARY

FROM EMPLOYEES

Step-2 :

set HTML Expression on "BASIC_SALARY" item

            <span #CSS_STYLE#>#BASIC_SALARY#</span>

Step-3 : 

--> Hidden item : css_style 

Step-4 : Create a dynamic action On Page Load 

--> Name : color_cell

--> Action : javaScript Code:

  

  apex.jQuery("span[data-style]").each(

  function()

  { 

    apex.jQuery(this).parent().attr('style', apex.jQuery(this).attr('data-style')); 

  }

);

--> Affected Elements : 

    Selection Type :  Event Source

==========================================
=============== Alternative try ================
==========================================

1. Create Interactive report page.

2. Go To Status Column >> Static ID- status

3. Go To report's properties >> Column CSS Classes- emp

4. Go To Page Properties >> Execute when Page Loads >> Paste the following code

    $(".emp td[headers=status]").each(function(){

celldata= $(this).text();

if (celldata =='Inactive')

$(this).parent().children().css('background-color','#f4b5b5');

    });

5. Create a Dynamic Action  >> Name- After Refresh

Event: After Refresh >> Selection Type: Region >> Your Report

Action: Execute Javascript Code >> Paste the following code

    $(".emp td[headers=status]").each(function(){

celldata= $(this).text();

if (celldata =='Inactive')

$(this).parent().children().css('background-color','#f4b5b5');

    });