[SalesForce] Change Background color of row in pageBlock Table

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>

Best Answer

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>
Related Topic