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实现你的要求
    – Spring
    Aug 16, 2016 at 10:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.