function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
MattyRayMattyRay 

I need to get alternating row colors onto this APEX: Outputpanel

Anyone have any ideas on how to get alternating rows in a apex outputpanel?  Heres my code... Thanks in advance!

 

      <style type="text/css">
        body {font-family: Arial, Helvetica, sans-serif; font-size: 12px;} 
        .instructions {color:#333333;font-size: 10px;}
        .odd {background-color: #FCF7F7;}
        .even {background-color: #E3DCDB;}

 

<apex:pageBlock id="dealBlk" title="Deals">
      
      <apex:outputPanel id="dealClosedPanel" > 
        <b>Closed Deals</b> <span class="instructions"> (Closed-Won or Client-Passed deals in last 7 days.)</span>
          <table id="tableClosedDeals" border="0" cellspacing="1" rowClasses="even,odd" cellpadding="0" width="100%" >
            <thead class="rich-table-thead">
              <tr class="headerRow" style="background-color:#E8E8E8;">
                <th scope="col" width="16%">Deal Name         </th>
                <th scope="col" width="16%">Brand / Buyer Name</th>
                <th scope="col" width="16%">Client Name       </th>
                <th scope="col" width="16%">Stage             </th>
                <th scope="col" width="17%">Est. Close Date   </th>
              </tr>
            </thead>
            <tbody>
              <apex:repeat value="{!closedDeals}" var="deal"> 
                <tr>
                  <td>{!deal.Name}</td> 
                  <td> 
                     <!--  If the brand field is empty, show the buyer; else show the brand only. -->
                     <apex:outputLabel value="{!deal.Account.Name}" rendered="{!deal.Brand__r.Name == null}" /> 
                     <apex:outputLabel value="{!deal.Brand__r.Name}" rendered="{!deal.Brand__r.Name <> null}" />
                  </td>
                  <td>{!deal.ClientName__r.Name}</td>
                  <td>{!deal.StageName}</td>
                  <td> 
                    <apex:outputText value="{0, date, MMM dd yyyy}" >
                      <apex:param value="{!deal.CloseDate}" /> 
                    </apex:outputText>
                  </td>
                </tr>
              </apex:repeat>    
            </tbody>
          </table>
        <br/>
      </apex:outputPanel>
Avidev9Avidev9

Have a look at the below code to generate a table which looks exactly like pageblock table 

 

<apex:pageBlock >
        <table cellspacing="0" cellpadding="0" border="0" id="searchResults" class="list">
             <thead class="rich-table-thead">
                 <tr class="headerRow">
                     <th>Case Number</th>
                     <th>Case Owner</th>
                     <th>Contact Name</th>
                 </tr>
             </thead>
             <tbody>
                 <apex:repeat value="{!cases}" var="c">
                     <tr onfocus="if (window.hiOn){hiOn(this);}" onblur="if (window.hiOff){hiOff(this);}" onmouseout="if (window.hiOff){hiOff(this);} " onmouseover="if (window.hiOn){hiOn(this);} " class="dataRow even  first">
                         <td class="dataCell">{!c.CaseNumber}</td>
                         <td class="dataCell">{!c.OwnerId}</td>
                         <td class="dataCell">{!c.ContactId}</td>
                     </tr>
                 </apex:repeat>
             </tbody>
         </table>
     </apex:pageBlock>