Dynamically Colour Cells in an Interactive Report

Question

My application requires an interactive report where cells are colour coded and the cell may, or may not have a value, but the value doesn't relate to the colour.
The report is based on a view which returns a result set as follows:
rn col1_value col1_colour col2_value col2_colour col3_value col3_colour col4_value col4_colour
1        null        grey          3        null       null        null        null        red
2        null        null          3        grey       null        null           4        red
3        null        grey       null        null          3        null        null        redIn the results, each cell to be displayed has two columns per row, one with the colour and one with the value to display where null is the default colour (white)/no value.
In Apex 4.1 I can set the colour based on the values using the dynamic actions on the report display, but I can't work out how to set the colour of col1_value based on the results of col1_colour. I am hoping there is a way to set the colour of the cell col1_value and hide col1_colour from the report.
If you know of any posts providing an example of how this may work, or if you are able to explain it to me I would really appreciate your time.
I appreciate it may not be simple to see what I am aiming for given the text restriction and no images/tables available on the forum, hopefully you get the idea, but if not, ask and I will try and explain further.
I have seen Blog posts about 3-4 years old on how you do this in Apex 3.0 or older, but can't work out how to get this to work in Apex 4.0 or Apex 4.1.

Answer 1

I have solved this using Javascript in a Dynamic Action, javascript something like:
$("td[headers='COL1_COLOUR']").each(function(){
   switch($(this).text())
      case "grey":
           $(this).parent().children("td[headers='COL1_VALUE']").css({"background-color":"#999"});
           break;
      case "green":
           $(this).parent().children("td[headers='COL1_VALUE']").css({"background-color":"green"});
           break;
      case "blue":
           $(this).parent().children("td[headers='COL1_VALUE']").css({"background-color":"blue"});
           break;
      case "orange":
           $(this).parent().children("td[headers='COL1_VALUE']").css({"background-color":"orange"});
           break;
      case "yellow":
           $(this).parent().children("td[headers='COL1_VALUE']").css({"background-color":"yellow"});
           break;
      default:
           break;
    $(this).css({"visibility":"hidden"});
    $("th[id='COL1_COLOUR']").css({"visibility":"hidden"});
});