Hotlinking an entire row in an HTML table

Rails
1

Hi,

This seems simple but I cant get it to work… I have a table with
4 or 5 columns and 20-30 rows. I’d like to have the ability to click
anywhere in a particular row to fire an action, such as bringing up
a “Details” page for the clicked row. This would eliminate the need
to generate a “Details” link at the end of every row, which is what I
have now and looks clunky. Ideally when the mouse hovers over a
row, it highlights it a different color to provide feedback, but for
now that really not an issue.

Any insights into the best way of doing this? I’m thinking it would
be a JS solution, but I’m not really familiar enough with it to know
which angle to attack it from.

Thanks

2

Yeah, sounds like a JS solution to me too.

A couple of things you can do…

  • When you generate a row, link the contents of the row to the ‘show’
    action. Then you just have to click on the rendered data to see more
    details.

  • add a “title” => “sometext” to your link, or the td element. That
    will show an infotip popup with “sometext”.

  • you might be able to get the row to highlight using the :hover CSS
    option.

  • To make it possible to click anywhere in the row, you probably need to
    use an ‘onclick’ handler in JS.

_Kevin

3

Kevin O. wrote:

Yeah, sounds like a JS solution to me too.

A couple of things you can do…

  • When you generate a row, link the contents of the row to the ‘show’
    action. Then you just have to click on the rendered data to see more
    details.

That wouldn’t work the row have text in it. Is it possible to link the
“white” part of the row as well?

  • you might be able to get the row to highlight using the :hover CSS
    option.

It cannot highlight the entire row, only the text on that column.

  • To make it possible to click anywhere in the row, you probably need to
    use an ‘onclick’ handler in JS.

_Kevin

I don’t think onclick handler can be binded to table’s row or TR.

I would be very interested to know how you can highlight a row in a
table. It seem impossible as far as I can tell.

4

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’}) });

Jason

5

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.

Jodi

6

Jodi S. wrote:

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.

Jodi

Hmm… I am not very good with javascript. Is it even possible to have
onmouseover event for table cells? I thought they only works for form
tags (such as text field). Could you give me a simple example? Thank
you.

7

Wai T. wrote:

Jodi S. wrote:

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.

Jodi

Hmm… I am not very good with javascript. Is it even possible to have
onmouseover event for table cells? I thought they only works for form
tags (such as text field). Could you give me a simple example? Thank
you.

Actually, after some researching, I found that it is possible to have
onmouseover events for TR cells. Now, the problem is how to do that
elegantly (with AJAX?) to pass parameters back to the controller.

My idea would be to have a hidden text fields or check box for each
table row, that will get toggled. But storing the values in hidden text
fields seems like a hack. Does anyone have a better idea?

8

On 2-Mar-07, at 10:54 PM, Wai T. wrote:

seems to work pretty well - you’ll just have the same onclick JS
you.

Actually, after some researching, I found that it is possible to have
onmouseover events for TR cells. Now, the problem is how to do that
elegantly (with AJAX?) to pass parameters back to the controller.

My idea would be to have a hidden text fields or check box for each
table row, that will get toggled. But storing the values in hidden
text
fields seems like a hack. Does anyone have a better idea?

Wai,

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

'your_row_id', url => 'your url', :id => @line_item.id %>"> @line_item.description

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!
Jodi

[1] Redirect Notice
2Faddons.mozilla.org%2Ffirefox%2F1843%
2F&ei=Ra3pRYfhNZX0iAHN24CjBw&usg=__Wnv_futN3OoTeIAOWgVEsUSVydk=&sig2=nv9
Hrc3RmImQuzWGlGjTXw

9

That helper’s called cycle() :

">

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

inside of an and making the 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,

Tieg
10

Jodi S. wrote:

'your_row_id', url => 'your url', :id => @line_item.id %>"> @line_item.description

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.

Thank you. The onclick remote_function is what I am looking for. I
would need to add items to a container whenever the user clicked on the
row. This will work perfectly. Once again, thanks a lot.