¿Cómo puedo resaltar una fila de la tabla usando Prototype?

Question

¿Cómo puedo usar la biblioteca Prototype y crear javascript discreto para inyectar los eventos onmouseover y onmouseout en cada fila, en lugar de colocar javascript en cada etiqueta de fila de la tabla?

Una respuesta que utilice la biblioteca Prototype (en lugar de mootools, jQuery, etc.) sería de gran ayuda.

Answer 1

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

Puedes usar prototipos. addClassName y removeClassName métodos.

Crea una clase CSS "resaltada" que aplicarás a los resaltados <tr>'s.Luego ejecute este código al cargar la página:

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 3

Una solución un poco genérica:

Digamos que quiero tener una forma sencilla de crear tablas con filas que se resaltarán cuando coloco el puntero del mouse sobre ellas.En un mundo ideal, esto sería muy fácil, con solo una simple regla CSS:

tr:hover { background: red; }

Desafortunadamente, las versiones anteriores de IE no admiten :hover selector en elementos distintos de A.Entonces tenemos que usar JavaScript.

En ese caso, definiré una clase de tabla "resaltada" para marcar las tablas que deberían tener filas desplazables.Haré el cambio de fondo agregando y eliminando la clase "resaltado" en la fila de la tabla.

CSS

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

JavaScript (usando prototipo)

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

Todo lo que tienes que hacer ahora es agregar la clase "resaltada" a cualquier tabla que desees:

<table class="highlightable">
    ...
</table>

Answer 4

Hice un ligero cambio en @swilliams código.

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

Esto me permite tener una tabla con una fila de encabezado que no resaltar.

<tr id="headRow">
    <th>Header 1</th>
</tr>

Answer 5

Puedes hacer algo con cada fila, así:

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

Entonces, en el cuerpo de esa función, tienes acceso a cada fila, una a la vez, en la variable 'fila'.Luego puedes llamar a Event.observe(row, ...)

Entonces algo como esto podría funcionar:

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

Answer 6

Encontré una solución interesante para el fondo de Filas, las filas resaltadas al pasar el mouse, sin JS.Aquí está enlace

Funciona en todos los navegadores.Para IE6/7/8...

tr{ position: relative; }
td{ background-image: none } 

Y para Safari utilizo una posición de fondo negativa para cada TD.