Skip to main content
Topics#VisualforcePergunta de John Neff
John Neff (Ring2Media) perguntou em #Visualforce
28 de abr. de 2015, 13:10

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
9 respostas
  1. Pankaj Ganwani (Indeed Inc.)
    28 de abr. de 2015, 18:07
    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>
Escrever uma resposta...
0/9000