Change Background color of row in pageBlock Table

Question

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:pageBlockButtons>
            <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}"/>
                                </apex:pageBlockTable>
                            </apex:pageBlocksection>
                        </apex:outputPanel>
                    </apex:repeat>
                </apex:pageBlock>
            </apex:repeat>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Answer 1

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

<script>
    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";
    }        
</script>

Answer 2

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

Answer 3

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);
    accList.add(ai);
    index++;
  }
}

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

}

-------------vf----------------

<apex:page sidebar="false" showHeader="false" controller="TestAction">
<style type="text/css">
.t{background-color: red}
.f{background-color: green}
</style>
<apex:pageBlock>
  <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")}'/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>

---

it working!!