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’ %>
Column 1 Header | Column 2 Header | etc..
---|---|
<%=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.