I have created a VF page where in I am displaying some rows in a Table.

What i am trying to achieve is - there is one row named "Status" in the table.Status can have 3 values - RED , GREEN , GREY.

How can i color the row depending upon the value in the status field.

Below is my VF Page

<apex:page controller="AccountSummaryReportController" action="{!loadKeyAccounts}"  >

    <apex:sectionHeader title="Account Summary Report as of : {!TODAY()}"  description="This Report Shows Accounts modified in last 31 days"/>
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton action="{!renderAsPdf}" value="Save as Pdf"/>
            <apex:repeat value="{!objectMap }" var="ProgNameKey">
                <apex:pageBlock title="{!ProgNameKey}" >
                    <apex:repeat value="{!objectMap [ProgNameKey]}" var="PlanNameKey">
                        <apex:outputPanel styleClass="grey" layout="block">
                            <apex:pageBlockSection title="{!PlanNameKey}" columns="1" >
                                <apex:pageBlockTable value="{!objectMap [ProgNameKey][PlanNameKey]}" var="lstGrnRate"  border="1" columnsWidth="20%,10%,70%">
                                    <apex:column value="{!lstGrnRate.Account__r.Name}"/>
                                    <apex:column value="{!lstGrnRate.Status__c }"/>
                                    <apex:column value="{!lstGrnRate.Account_Summary__c}"/>
  • please let me now if there is a way if we can achieve this?
    – Samir
    Aug 16, 2016 at 5:48

3 Answers 3


Try the following code. This is by using nested if statement.

       <apex:column value="{!lstGrnRate.Status__c }" 
          styleClass = "{! If(lstGrnRate.Status__c=='RED' ,'redColour',
          If(lstGrnRate.Status__c=='GREEN','greenColour', 'greyColour')) }" />

In CSS, you may give

      .greenColour {background-color:green;}
      .redColour {background-color:red;}
      .greyColour {background-color:grey;}  

You may please refer this answer to know more about using if statements in HTML (Apex/Visualforce).

Selecting parent row of the particular td using JavaScript

    var redRow = document.getElementsByClassName("redColour");
    var greenRow = document.getElementsByClassName("greenColour");
    var greyRow = document.getElementsByClassName("greyColour");
    for(var i=0;i<redRow.length;i++){
        redRow[i].parentNode.className = "redColour";
    for(var i=0;i<greenRow.length;i++){
        greenRow[i].parentNode.className = "greenColour";
    for(var i=0;i<greyRow.length;i++){
        greyRow[i].parentNode.className = "greyColour";
  • Thank you for ur answer.But for some reason,this is not working.I even tried with simple IF statement...I found no success..I am not getting any error also
    – Samir
    Aug 16, 2016 at 7:34
  • @Samir Can you please check whether lstGrnRate.Status__c is returning any value? Also, I've made small edit to the code. Can you check it now?
    – Sandra
    Aug 16, 2016 at 7:41
  • Yes..on the vf page..i can see that some status have green value
    – Samir
    Aug 16, 2016 at 7:43
  • @Samir And there are no classes linked to the element? Hope you've tried with the edited code.
    – Sandra
    Aug 16, 2016 at 7:50
  • 2
    The normal code worked.I did a simple mistake.i missed one curely bracket in css
    – Samir
    Aug 16, 2016 at 11:42

try use styleClass
try using CSS and see if that works. If not, you could use an HTML Table with apex:repeat enter image description here

  • I tried this .but i didnt find any success with this
    – Samir
    Aug 16, 2016 at 7:35
public with sharing class TestAction {
public List<AccountInner> accList{get;set;}
public TestAction() {
  accList = new List<AccountInner>();
  Integer index = 1;
  for(Account acc:[SELECT ID,NAME FROM ACCOUNT]){
    AccountInner ai = new AccountInner();
    ai.acc = acc;
    ai.flag = (Math.mod(index, 2) == 0?TRUE:FALSE);

public class AccountInner{
  public Account acc{get;set;}
  public Boolean flag{get;set;}



<apex:page sidebar="false" showHeader="false" controller="TestAction">
<style type="text/css">
.t{background-color: red}
.f{background-color: green}
  <apex:pageBlockTable value="{!accList}" var="obj">
    <apex:column value="{!obj.acc.id}" styleClass='{!if(obj.flag,"t","f")}'/>
   <apex:column value="{!obj.acc.Name}" styleClass='{!if(obj.flag,"t","f")}'/>

it working!! enter image description here

  • Could you please let me know whats wrong in Sandra's answer?
    – Samir
    Aug 16, 2016 at 9:08
  • <apex:column value="{!lstGrnRate.Status__c }" styleClass = "{! If(lstGrnRate.Status__c=='RED' ,'redColour', If(lstGrnRate.Status__c=='GREEN','greenColour', 'greyColour')) }" />
    – Samir
    Aug 16, 2016 at 9:18
  • 不太明白你的意思,我的意思是apex:column 是支持 styleclass的,那就可以采用css实现你的要求 Aug 16, 2016 at 10:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .