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

April 28, 2015
·
Like
0
·
Follow
1

Best Answer chosen by John Neff

Pankaj_Ganwani
Hi,

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

April 28, 2015
·
Like
1
·
Dislike
0

Pankaj_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

April 28, 2015
·
Like
0
·
Dislike
0

John Neff
Hi Pankaj - thank you for this, I follow your logic... but where do I reference the style?

April 28, 2015
·
Like
0
·
Dislike
0

Pankaj_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.

April 28, 2015
·
Like
0
·
Dislike
0

John 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"> Opportunity Name </td> <td style="background-color: #C6D4D4; color: #040404"> Company Name </td> <td style="background-color: #C6D4D4; color: #040404"> Vertical <td style="background-color: #C6D4D4; color: #040404"> Weeks Live </td> </td> <td style="background-color: #C6D4D4; color: #040404"> Days Idle </td> <td style="background-color: #C6D4D4; color: #040404"> Contract Sent </td> <td style="background-color: #C6D4D4; color: #040404"> Next Step </td> <td style="background-color: #C6D4D4; color: #040404"> Lead Source </td> <td style="background-color: #C6D4D4; color: #040404"> Probability </td> <td style="background-color: #C6D4D4; color: #040404"> Owner </td> <td style="background-color: #C6D4D4; color: #040404"> Revenue Last Week </td> <td style="background-color: #C6D4D4; color: #040404"> Revenue Last 30 Days </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??

April 28, 2015
·
Like
0
·
Dislike
0

Pankaj_Ganwani
Hi,

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

April 28, 2015
·
Like
0
·
Dislike
0

John Neff
So would I want to replace i with a 1?

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

April 28, 2015
·
Like
0
·
Dislike
0

Pankaj_Ganwani
Hi,

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

This was selected as the best answer

John Neff
got it! Thank you so much!

April 28, 2015
·
Like
0
·
Dislike
0

Tyler 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="{!}">

November 12, 2020
·
Like
1
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

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

All Answers

You need to sign in to do that.