seleccionada - tablas dinamicas html javascript

¿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 poner el 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

Puede usar los métodos addClassName y removeClassName .

Cree una clase CSS "hilight" que aplique a los <tr> hilighted <tr> ''s. A continuación, ejecute este código en la carga de 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 2

Puedes hacer algo en cada fila, así:

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

Entonces, en el cuerpo de esa función, tiene acceso a cada fila, de a una por vez, en la variable ''fila''. A continuación, puede llamar a Event.observe (fila, ...)

Entonces, algo como esto podría funcionar:

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

Answer 3

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

Una solución un poco genérica:

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

tr:hover { background: red; }

Desafortunadamente, las versiones anteriores de IE no son compatibles: seleccionamos el control deslizante en otros elementos que no sean A. Entonces, tenemos que usar JavaScript.

En ese caso, definiré una clase de tabla "resaltable" para marcar las tablas que deberían tener filas divisibles. 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 tienes que hacer ahora es agregar clases "resaltables" a cualquier tabla que desees:

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

Answer 5

Encontré una solución interesante para el fondo de filas, resaltando las filas al pasar el mouse, sin JS. Aquí hay un 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.

Answer 6

Hice un ligero cambio al código de @swilliams .

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

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

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