Rails - Jun 2009 - 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:

=============================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'' %>
<table class="tablemain" cellpadding="3"
cellspacing="1">
  <thead>
    <tr class="tablehead">
      <th NOWRAP>Column 1 Header</th>
      <th NOWRAP>Column 2 Header</th>
      etc..
    </tr>
  </thead>
  <tbody>
  <% @your_table.each do |your_table| %>
    <tr class="<%= cycle(''oddrow'',
''evenrow'') %>"
onmouseover="cell_over(this, ''TrHover'')"
onmouseout="cell_out(this)">
      <td class="centerAlign"><%=h your_table.info1
%></td>
      <td class="leftAlign"><%=h your_table.info2
%></td>
    </tr>
  <% end %>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

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.
-- 
Posted via http://www.ruby-forum.com/.

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.

-- 
Posted via http://www.ruby-forum.com/.