+ Start a Discussion
John NeffJohn Neff 

How can I create alternating row colors in a table on my VF page?

Hello, 

I am working on displaying a list of opportunities in a table on one of my vf pages, and would like the table rows to alternate in color to make it easier to read. 

I was using a pageBlockTable before, and was able to accomplish this easily by defining a style: 
 
<style>
             .odd {
              background-color: #A4A4A4;
                }
             .even {
             background-color: #E6E6E6;
                }
            </style>

and then referencing thaty style like so: 
 
<apex:pageblocktable value="{!listOfLive}" var="lv" rowclasses="even,odd">

Unfortunatley, I have had to move away from using a pageBlockTable to using apex:repeat - and I can not get this trick to work. 

Here is my new table: 
 
<table cellpadding="5" style="border-collapse: collapse" width="100%">
                <tr>
                              <td style="background-color: #C6D4D4; color: #040404">
                        <b>Opportunity Name</b>
                    </td>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Company Name</b>
                    </td>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Vertical</b>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Weeks Live</b>
                    </td>
                    
                    
                    </td>
                     <td style="background-color: #C6D4D4; color: #040404">
                        <b>Days Idle</b>
                    </td>
                                 
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Contract Sent</b>
                    </td>
        <td style="background-color: #C6D4D4; color: #040404">
                        <b>Next Step</b>
                    </td>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Lead Source</b>
                    </td>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Probability %</b>
                    </td>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Owner</b>
                    </td>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Revenue Last Week</b>
                    </td>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Revenue Last 30 Days</b>
                    </td>
                </tr>
                <apex:repeat value="{!listOfLive}" var="lv">
                                                                         <tr>
                                  
                            <td>
                                {!lv.name}
                            </td>  
                              <td>
                                {!lv.Company_Name__c}
                            </td> 
                                <td>
                                {!lv.Vertical__c}
                            </td>
                            <td>
                                {!lv.Weeks_Live__c}
                            </td>
                           
                            <td>
                                {!lv.Days_Since_Last_Modified__c}
                            </td>
                            <td>
                                {!lv.Contract_SENT__c}
                            </td>
                            
                            <td>
                                {!lv.NextStep} 
                            </td>
                
                             <td>
                                {!lv.LeadSource}
                            </td>
                             <td>
                                {!lv.Probability}
                            </td>
                            <td>
                                {!lv.Owner_Name__c}
                            </td>
                            <td>
                                {!lv.Spend_Last_Week__c}
                            </td>
                            <td>
                                {!lv.Spend_Last_30_Days__c}
                            </td>
                        </tr>
                                                          </apex:repeat>
            </table>

What is the best way to accomplish alternating row colors using this method?

Thanks in advance!

John
Best Answer chosen by John Neff
Pankaj_GanwaniPankaj_Ganwani
Hi,

Sorry, Please use this below code at line no.46:
<b><tr style="!{IF(MOD(count,2)==0, 'background-color: #A4A4A4;','background-color: #E6E6E6;')}"></b>

All Answers

Pankaj_GanwaniPankaj_Ganwani
Hi,

You can use <apex:variable> tag instead.

Before starting of <apex:repeat> declare <apex:variable var = "count" value="{!0}"/>
<tr class = "!{IF(MOD(i,2)==0, 'event','odd')}">
//td
//td
Before </tr> tag use  <apex:variable var="count" value="{!count+1}"/>

For more info you can refer below mentioned link:
http://www.infallibletechie.com/2012/11/how-to-increment-apexvariable.html
John NeffJohn Neff
Hi Pankaj - thank you for this, I follow your logic... but where do I reference the style? 
Pankaj_GanwaniPankaj_Ganwani
Hi,

You can refer my above code and you can simply declare two classes for styles within <style> tags as you had already given in the problem statement or you can simply use style tag within the <tr>. Like below:

<tr class = "!{IF(MOD(i,2)==0, 'even','odd')}">
or
<tr style= "!{IF(MOD(i,2)==0, 'background-color: #A4A4A4;','background-color: #E6E6E6;')}">
Please let me know if you face any issue with them.
John NeffJohn Neff
thanks Pankaj - so I would want it to look like this?:
 
<apex:pageBlock title="Live">
             <table cellpadding="5" style="border-collapse: collapse">
                <tr>
                              <td style="background-color: #C6D4D4; color: #040404">
                        <b>Opportunity Name</b>
                    </td>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Company Name</b>
                    </td>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Vertical</b>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Weeks Live</b>
                    </td>
                    
                    
                    </td>
                     <td style="background-color: #C6D4D4; color: #040404">
                        <b>Days Idle</b>
                    </td>
                                 
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Contract Sent</b>
                    </td>
        <td style="background-color: #C6D4D4; color: #040404">
                        <b>Next Step</b>
                    </td>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Lead Source</b>
                    </td>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Probability</b>
                    </td>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Owner</b>
                    </td>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Revenue Last Week</b>
                    </td>
                    <td style="background-color: #C6D4D4; color: #040404">
                        <b>Revenue Last 30 Days</b>
                    </td>
                </tr>
                <apex:variable var="count" value="{!0}"/>
                <apex:repeat value="{!listOfLive}" var="lv">
                                                                         <tr style="!{IF(MOD(i,2)==0, 'background-color: #A4A4A4;','background-color: #E6E6E6;')}">
                                  
                            <td>
                                {!lv.name}
                            </td>  
                              <td>
                                {!lv.Company_Name__c}
                            </td> 
                                <td>
                                {!lv.Vertical__c}
                            </td>
                            <td>
                                {!lv.Weeks_Live__c}
                            </td>
                           
                            <td>
                                {!lv.Days_Since_Last_Modified__c}
                            </td>
                            <td>
                                {!MONTH(lv.Contract_SENT__c)}/{!DAY(lv.Contract_SENT__c)}/{!YEAR(lv.Contract_SENT__c)}
                            </td>
                            
                            <td>
                                {!lv.NextStep} 
                            </td>
                
                             <td>
                                {!lv.LeadSource}
                            </td>
                             <td>
                                {!lv.Probability}%
                            </td>
                            <td>
                                {!lv.Owner_Name__c}
                            </td>
                            <td>
                            <apex:outputText value="{0,number,#,##0.00}">$    
                               <apex:param value="{!lv.Spend_Last_Week__c}"/>
                                    </apex:outputText>
                                                        </td>
                            <td>
                            
                            <apex:outputText value="{0,number,#,##0.00}">$    
                               <apex:param value="{!lv.Spend_Last_30_Days__c}"/>
                                    </apex:outputText>
                                                          </td>
                                  <apex:variable var="count" value="{!count+1}"/>                        
                        </tr>
                                                          </apex:repeat>

I have compiled this and it hasn't yielded any change - what am I forgetting??
Pankaj_GanwaniPankaj_Ganwani
Hi,

Please use count instead of i at line no 44 for checking MOD.
John NeffJohn Neff

So would I want to replace i with a 1? 

 

I am sorry, I just can't figure this out. 
 

Pankaj_GanwaniPankaj_Ganwani
Hi,

Sorry, Please use this below code at line no.46:
<b><tr style="!{IF(MOD(count,2)==0, 'background-color: #A4A4A4;','background-color: #E6E6E6;')}"></b>
This was selected as the best answer
John NeffJohn Neff
got it!  Thank you so much!  
Tyler McCartyTyler McCarty
There is a typo in the original answer in case anyone experiences an issue.
Correct example is:
   
<apex:variable var="count" value="{!0}"/>
<apex:repeat value="{!accounts}" var="acc">
   <tr style="{!IF(MOD(count,2)==0, 'background-color: #FFFFFF;','background-color: #E5E7E9;')}">
       <td>acc.Name</td>
       <td/>acc.BillingAddress</td>
       <td/>acc.OwnerId</td>
       <apex:variable var="count" value="{!count+1}"/>
    </tr>
</apex:repeat>


Instead of: <tr style="!{}">
it should be: <tr style="{!}">