How to make an alternating hover table in Rails

rubyonrails-talk
1

Well, there's not much I can offer to the community as of yet, but I figure I can offer what I do know. I'm pretty solid with javascript and css and table formatting. So, I wanted to show you how to make a table that houses alternating row colors and also has a hover effect when you mouse hover over the rows.

First, you'll need the following files:

2

In case someone asks, I like including table footers in my table models as it puts a nice evenly distributed element at the bottom of my tables. You don't necessarily have to have nowrap arguments in your <TH> elements but it helps so that if someone has a lower resolution, they don't fold your sort options (if you add sort options or image sort icons to your columns).

If you want to add sortable columns to your table you can do something similar:

<th NOWRAP><%= sort_column('rank', 'asc') %> Rank <%= sort_column('rank', 'desc') %></th>

and add the following in your helper file - in mind I have a table_helper.rb for table code:

  # adds up / down images for asc and desc sorting to all table columns based on controller name called   def sort_column(title, direction)     direction == "asc" ? image = "up.gif" : image = "down.gif"     (link_to image_tag(image, :border=>0, :alt => direction), :controller => controller.controller_name, :yoursort => (@showall ? 30 : nil), :orderby => title, :sortby => direction)   end

Then you would create an up_arrow image and call it up.gif and a down_arrow image and call it down.gif. The controller.controller_name will be referenced automatically from the view and the controller name specified from that view when the method is called.