How to make an alternating hover table in Rails

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:


function cell_over(cell, classname) {
if (document.all || document.getElementById) {
cell.classBackup = cell.className;
cell.className = classname;
function cell_out(cell)
if (document.all || document.getElementById) {
cell.className = cell.classBackup;

table.css (or add to your stylesheet)

.tablemain {
color: #000;
font-style: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #DDD;
width: 100%;
margin:5px 0 5px 0;
.tablehead {
background: #000;
color: #FFF;
font-weight: bold;
font-size: .9em;
font-family: Verdana, Arial, Helvetica, sans-serif;
.TrHover {
background-color: #F8FDBB;
color: #000000;
.oddrow {
background-color: #FFF;

.evenrow {
background-color: #ececec;
.rightAlign {
text-align: right;
.leftAlight {
text-align: left;
.centerAlign {
text-align: center;

application_helper.rb (your application_helper file)

def javanow(*files)

In your index, when making your table you’ll place the following:

<% = javanow ‘mouseover.js’ %>

etc.. <% @your_table.each do |your_table| %> <% end %>
Column 1 Header Column 2 Header
<%=h your_table.info1 %> <%=h your_table.info2 %>

The javanow just allows you to plug in the javascript at the moment you
need it. You could probably make the code a bit drier by doing
something with the tr class code but I didn’t see a need to personally.

I wish I could offer more to the community but this is it so far.


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

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

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

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)

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.