Hotlinking an entire row in an HTML table

No, you can’t put any styling on

that will highlight the entire row. I guess you’ll want to do some Javascript/CSS magic to run through the 's of the setting their background color to the highlight color. Something like (with Prototype, of course):

$$(‘tr.highlight td’).each(function (element) { element.setStyle({background-color: ‘#f3f3f3’}) });


Wai, I tend to solve this with a tr mouse events:

onmouseover=“this.className=‘selected’” onmouseout=“this.className=’<%= row_class %>’”

as for clicks, I’ve found you have to do an onclick on the td - which seems to work pretty well - you’ll just have the same onclick JS logic for every column.



    <tr class="<%= row_class %>" onmouseover="this.className='selected'" onmouseout="this.className='<%= row_class %>'" style="height: 45px;">

the above will handle the highlighting requirement for each row - where row_class is the 'normal' not highlighted class - and 'selected' is the class for a highlighted row.

erb is assigning a row_class for me, as I want to alternate the colors for each row. This can be accomplished by iterating over your detail records and assigning an alternating row class:

    @work_order_items.each_with_index do |line_item, line_count|
         row_class = line_count%2 == 0 ? "even" : "odd" #note there is a helper provided by rails to do this - can't remember the helper name

as for 'hotlinking' you'll need to have each cell (td) call some javascript. You haven't said what you want to hotlink, but I can assume you're thinking of an ajax action - take a look at remote_function in the api docs, using the (undocumented?) :with parameter ala:

  <td onclick=<%= remote_function(:update => 'your_row_id', url => 'your url', :id => %>"> @line_item.description </td>

that should be enough detail to you get you started. Rails helpers aren't an excuse for not knowing javascript - you really need to pick up this skill - plus CSS. Rails (imo) makes it a bit easier to deal with these topics, but you're inevitably going to find yourself in circumstances where you're gonna get just plain lost. Use view source to see what the helpers do for you, and grab [1]firebug to help debug when things aren't going well.

you're on your own now cowboy - enjoy the ride!


That helper's called cycle() :

<tr class="<%= cycle("even", "odd") -%>">

What I do is...

tr.even td { color: your-color; }
tr.odd td { color: #FFF; }
tr:hover td { color: hover-color; }

But IE (6 and below, I don't know about 7) doesn't accept pseudo-
selectors on anything but anchor links, so there are javascripts out
there that can attach a class called "hover" to any element when you
hover it. So you could do this in your IE-specific stylesheet
(assuming you've got one)...

tr.hover td { color: hover-color; }

Another thing I've done in the past for cell-specific hovers are
wrapping everything in the <td> inside of an <a> and making the <a> a
block-level element with the height and width of the cell. And I
totally agree with Jodie; Firebug extension is the best thing ever,