views:

4640

answers:

6

How can I use the Prototype library and create unobtrusive javascript to inject the onmouseover and onmouseout events to each row, rather than putting the javascript in each table row tag?

An answer utilizing the Prototype library (instead of mootools, jQuery, etc) would be most helpful.

+5  A: 

You can use Prototype's addClassName and removeClassName methods.

Create a CSS class "hilight" that you'll apply to the hilighted <tr>'s. Then run this code on page load:

var rows = $$('tbody tr');  
for (var i = 0; i < rows.length; i++) {  
    rows[i].onmouseover = function() { $(this).addClassName('hilight'); }  
    rows[i].onmouseout = function() { $(this).removeClassName('hilight'); }  
}
pix0r
+8  A: 
<table id="mytable">
    <tbody>
        <tr><td>Foo</td><td>Bar</td></tr>
        <tr><td>Bork</td><td>Bork</td></tr>

    </tbody>
</table>

<script type="text/javascript">

$$('#mytable tr').each(function(item) {
    item.observe('mouseover', function() {
        item.setStyle({ backgroundColor: '#ddd' });
    });
    item.observe('mouseout', function() {
        item.setStyle({backgroundColor: '#fff' });
    });
});
</script>
swilliams
Very cool. I didn't know you could do things like $$('#mytable tr'). That makes my life a lot easier.
Mark Biek
@swilliams code is nicer than my example, but I think you should use addClassName() rather than explicitly setting style in the JS.
pix0r
@Mark Biek, there are a bunch of helper guys like that $F, and $A. See the utility page: http://www.prototypejs.org/api/utility and Enumerable objects are very powerful: http://www.prototypejs.org/api/enumerable
swilliams
+1  A: 

You can do something to each row, like so:

$('tableId').getElementsBySelector('tr').each(function (row) {
  ...
});

So, in the body of that function, you have access to each row, one at a time, in the 'row' variable. You can then call Event.observe(row, ...)

So, something like this might work:

$('tableId').getElementsBySelector('tr').each(function (row) {
  Event.observe(row, 'mouseover', function () {...do hightlight code...});
});
pkaeding
+1  A: 

I made a slight change to @swilliams code.

$$('#thetable tr:not(#headRow)').each(

This lets me have a table with a header row that doesn't get highlighted.

<tr id="headRow">
    <th>Header 1</th>
</tr>
Mark Biek
From this am I correct to assume I can select all the rows if I class them with _highlightable_ and calling $$('.highlightable').each()?
Jason Navarrete
That seems like it will work.
Mark Biek
Would something like $$('#thetable not(th)') work? I usually use THs
Lucas Jones
+3  A: 

A little bit generic solution:

Let's say I want to have a simple way to make tables with rows that will highlight when I put mouse pointer over them. In ideal world this would be very easy, with just one simple CSS rule:

tr:hover { background: red; }

Unfortunately, older versions of IE don't support :hover selector on elements other than A. So we have to use JavaScript.

In that case, I will define a table class "highlightable" to mark tables that should have hoverable rows. I will make the background switching by adding and removing the class "highlight" on the table row.

CSS

table.highlightable tr.highlight { background: red; }

JavaScript (using Prototype)

// when document loads
document.observe( 'dom:loaded', function() {
    // find all rows in highlightable table
    $$( 'table.highlightable tr' ).each( function( row ) {
        // add/remove class "highlight" when mouse enters/leaves
        row.observe( 'mouseover', function( evt ) { evt.element().addClassName( 'highlight' ) } );
        row.observe( 'mouseout', function( evt ) { evt.element().removeClassName( 'highlight' ) } );
    } );
} )

HTML

All you have to do now is to add class "highlightable" to any table you want:

<table class="highlightable">
    ...
</table>
Fczbkk
A: 

I fond interesting solution for Rows background, the rows highlighting on mouse over, without JS. Here is link

Works in all browsers. For IE6/7/8 ...tr{ position: relative; } ...td{ background-image: none } and for Safari i use negative background position for each TD.

Zloi