Sweetest Way To Created Alternate Colored Rows

There are many ways to create altnerate colors rows in a table but I was wondering if their is a nice Rails or Ruby way of doing it? Any suggestions? :slight_smile:

Your Friend,

John

cycle()

This is the way I did it:

  <% counter = 0 %>   <% @companies.each do |company| -%>     <li class="<%= ((counter % 2) == 0) ? 'light' : 'dark' %>">       <% counter += 1 %>

I am sure their is a better way though. I hope :slight_smile:

http://rubyonrails.org/api/classes/ActionView/Helpers/TextHelper.html#M000518

cycle(first_value, *values)

Returns a Cycle object whose to_s value cycles through items of an array every time it is called. This can be used to alternate classes for table rows:

<%- for item in @items do -%>

<tr class="<%= cycle("even", "odd") %>">

  ... use item ...

</tr>

<%- end -%>

You can use named cycles to prevent clashes in nested loops. You‘ll have to reset the inner cycle, manually:

<%- for item in @items do -%>

<tr class="<%= cycle("even", "odd", :name => "row_class")

  <td>

    <%- for value in item.values do -%>

      <span style="color:'<%= cycle("red", "green", "blue"

                                    :name => "colors") %>'">

        item

      </span>

    <%- end -%>

    <%- reset_cycle("colors") -%>

  </td>

<%- end -%>

look into the ‘cycle’ method. you can cycle through a couple different colors or CSS styles. for example, in your partial or in your output loop for the table:

<% css_class = cycle(‘report_detail_row’, ‘report_detail_row_alt’) -%>

and then put that in your table/div output ed

<% counter = 0 -%> <% @companies.each do |company| -%>    <li class="Line<%= counter -%>">    <% counter = 1 - counter -%>

I usually do this with JS, since that way I don't have to add extra classes to each row.

addEvent(window, "load", zebratables_init);

function zebratables_init() {     var even = false;     if (!document.getElementsByTagName) return;     tbls = document.getElementsByTagName("table");     for (ti=0;ti<tbls.length;ti++) {         thisTbl = tbls[ti];         if (((' '+thisTbl.className+' ').indexOf("zebra") != -1) && (thisTbl.id)) {         for (j=1;j<thisTbl.rows.length;j++) {       thisTbl.rows[j].className =                  even ? 'tr_even' : 'tr_odd';             // flip from odd to even, or vice-versa             even = ! even;       }         }     } }

John Oxley wrote:

<% counter = 0 -%> <% @companies.each do |company| -%>

Untested warning:

<% @companies.each_with_index do |company, idx| -%>    <li class="Line<%= idx % 2 -%>"> ...

I don't like cycle because I want NO class in the non-even rows. Why make it harder for the browser to render your table?

<% @registrations.each_with_index do |registration, i| %>   <% row_class = i%2 == 1 ? '' : ' class="even"' %>   <tr<%= row_class %>>     [...]   </tr> <% end %>

I don't like cycle because I want NO class in the non-even rows. Why make it harder for the browser to render your table?

<% @registrations.each_with_index do |registration, i| %>   <% row_class = i%2 == 1 ? '' : ' class="even"' %>   <tr<%= row_class %>>     [...]   </tr> <% end %>

Now let's try the same with cycle:

<% @registrations.each do |registration| %>   <tr <%= cycle('', 'class="even"') -%>>      [...]    </tr> <% end %>

Regards, Rimantas

I also do this with Javascript instead.