# How to make an alternating hover table in Rails

**URL:** <https://www.ruby-forum.com/t/how-to-make-an-alternating-hover-table-in-rails/171183>\
**Category:** Rails\
**Created:** [June 27, 2009, 10:39pm UTC](https://www.ruby-forum.com/t/how-to-make-an-alternating-hover-table-in-rails/171183 "2009-06-27T22:39:46Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![elricstorm](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/e/da6949/32.png) [@elricstorm](https://www.ruby-forum.com/u/elricstorm)\
**Post date:** [June 27, 2009, 10:39pm UTC](https://www.ruby-forum.com/t/how-to-make-an-alternating-hover-table-in-rails/171183/1 "2009-06-27T22:39:46Z")

</div>

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:

==============================  
mousehover.js

# 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;  
vertical-align:top;  
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) javascript\_include\_tag(\*files) end

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.

Enjoy.

---

<div class="post-metadata">

**Author:** ![elricstorm](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/e/da6949/32.png) [@elricstorm](https://www.ruby-forum.com/u/elricstorm)\
**Post date:** [June 27, 2009, 10:47pm UTC](https://www.ruby-forum.com/t/how-to-make-an-alternating-hover-table-in-rails/171183/2 "2009-06-27T22:47:27Z")

</div>

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  
similar:

\<%= 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)  
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.