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
Shiv ShankarShiv Shankar 

alternate color for table row.

Hi i have created a one visual force page whic is rendering as PDF.

In this one table is rendering dynamicaly(not a apextable). I want to show table row in alterante color. i found some line of code which used JQuery, this works fine when i render as html but now when , i render it as 'PDF'


$(document).ready( function(){

$("#myTable tbody tr:visible:even",this).css('background-color','#fffffe');
$("#myTable tbody tr:visible:odd",this).css('background-color','#e0dfde');


Please tell solution ASAP.


You won't be able to do this via jquery, or any kind of javascript, as there isn't a javascript engine associated with PDF renderers.  You'd need to do this via CSS - there's a soluton at:


but note that IE and some firefox versions don't support this.

Greg RohmanGreg Rohman



I know this thread is a couple of months old, but I had a similar requirement and found a solution that worked for me.


In my case, my Visualforce page is controlled by a custom controller and is rendering as a PDF. In my controller, I have a wrapper class that, in addition to the object that I'm returning, also includes an "index" integer that's incremented for each record returned. A sample wrapper class is defined below:


    private class objWrapper {
        public Custom_Object__c deal {get;set;}
        public Integer index { get;set;}
        public objWrapper(Custom_Object__c d, Integer i){
            obj = d;
            index = i;


Then, in the Visualforce page, in the <apex:repeat> loop, I'm performing a simple MOD function to determine if the index is odd or even, and applying an "altRow" class on even rows:


		<apex:repeat value="{!getterClassHere}" var="d">
		<tr class="{!IF(MOD(d.index,2)==1,'','altRow')}">
			<td><apex:outputText value="{!d.obj.Name}"/></td>



Hope that helps.



Thanks Greg!  I see that this is a year old thread, but I had a similar issue, and creating a wrapper plus some CSS worked beautifully.
Vladimir Romanov #1Vladimir Romanov #1
just to add: there is an alternative solution using <apex:variable> to alternate row's classes coined by Mitesh Sura here: