How to display <apex:repeat> row background with alternative colour?

Question

I am facing aProblem.I want to show a table having row with alternative background color.i am displaying data using .I cant use pageblocktable or any other table method .I have to complete my problem with apex repeat only . Please anyone Suggest?

Answer 1

The CSS approach is the best way to go. But if for some reason you can't do that, be aware that there is an apex:variable tag that you can use for things like loop counters or this sort of logic.

Example controller:

public class A {
    public String[] values {
        get {
            return new String[] {'aaaa', 'bbbb', 'cccc', 'dddd'};
        }
    }
}

and page with alternating color table rows:

<apex:page controller="A">
    <table>
    <apex:variable var="color" value="red"/>
    <apex:repeat value="{!values}" var="value">
        <tr style="background-color: {!color}"><td>{!value}</td></tr>
        <apex:variable var="color" value="{!IF(color == 'red', 'blue', 'red')}"/>
    </apex:repeat>
    </table>
</apex:page>

Answer 2

You just need to use the CSS Styling like below. Nothing else is required to use along with <apex:repeat>

<style>
tr:nth-child(even) {
    background-color: red;
}
tr:nth-child(odd) {
    background-color: blue;
}
</style>