How can I highlight a table row using Prototype?

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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>

Answer 5

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>

Answer 6

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.