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

Question

¿Cómo puedo usar la librería Prototype y crear Javascript discreta para inyectar el onmouseover y onmouseout eventos para cada fila, en lugar de poner el código JavaScript en cada etiqueta de fila de la tabla?

Una respuesta utilizando la librería 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

Puede utilizar addClassName y removeClassName métodos de prototipo.

crear una clase CSS "hilight" que se va a aplicar a los hilighted <tr> 's. A continuación, ejecute el 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

Puede hacer algo para cada fila, así:

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

Por lo tanto, en el cuerpo de esa función, se tiene acceso a cada uno fila, uno a la vez, en la variable 'fila'. A continuación, puede llamar Event.observe (fila, ...)

Por lo tanto, algo como esto podría funcionar:

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

Answer 4

hice un pequeño cambio en el código @swilliams.

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

Esto me permite tener una tabla con una fila de cabecera que no significa ObtenerTextoSeleccionado.

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

Answer 5

Un poco poco de solución genérica:

Digamos que yo quiero tener una forma sencilla de hacer tablas con filas que pondrá de relieve cuando pongo puntero del ratón sobre ellos. En este mundo ideal, sería muy fácil, con sólo una regla CSS simple:

tr:hover { background: red; } 

Desafortunadamente, versiones antiguas de IE no soportan: Selector de vuelo estacionario en elementos distintos de A. Así que tenemos que utilizar JavaScript.

En ese caso, voy a definir una clase de tabla "highlightable" para marcar las tablas que deben tener filas hoverable. Haré el cambio de fondo agregando y quitando la clase "resaltar" en la fila de la tabla.

CSS

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

JavaScript (usando 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

Todo lo que tiene que hacer ahora es añadir la clase "highlightable" a cualquiera tabla que desea:

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

Answer 6

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

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.