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/.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Talk" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---
