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()

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

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.