Element.toggle prototype when freezing, disables with childElements

Question

I got the following situation:

I got the table structure as follows:

<tr>
  <td>text</td>
  <td>text</td>
  <td>text</td>
  <td><a href="#"><img src="#" /></td>
  <td><span style="display:hidden"><a href="#">e</a> <a href="#">e</a></td>
</tr>

What I am doing with the following function is displaying a hidden range when hovering a row in a table. However, these are quirks when I cast the children inside tr: a fixed image and the range itself. How can i fix this?

// Reveal item options on hover
$$('#financedata tr').invoke('observe', 'mouseover', function(event) {
    event.target.up().childElements()[4].childElements()[0].toggle();                   
}); 
$$('#financedata tr').invoke('observe', 'mouseout', function(event) {
    event.target.up().childElements()[4].childElements()[0].toggle();
}); 

Answer 1

Try the following:

$$('#financedata tr').invoke('observe', 'mouseout', function(event) {
    this.up('tbody').childElements()[4].childElements()[0].toggle();
});

"this". Prototype "this" , , event.target( , -) event.findElement() , ..up('tbody') , , . .

: http://www.prototypejs.org/api/event/observe , .