Come posso evidenziare una riga di tabella utilizzando Prototype?

Question

Come posso utilizzare la libreria Prototype e creare javascript discreto per inserire gli eventi onmouseover e onmouseout in ciascuna riga, anziché inserire il javascript in ciascun tag di riga della tabella?

Sarebbe molto utile una risposta che utilizzi la libreria Prototype (invece di mootools, jQuery, ecc.).

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

Puoi usare i prototipi addClassName E removeClassName metodi.

Crea una classe CSS "hilight" da applicare all'hilighted <tr>'S.Quindi esegui questo codice al caricamento della pagina:

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

Soluzione un po' generica:

Diciamo che voglio avere un modo semplice per creare tabelle con righe che verranno evidenziate quando metto il puntatore del mouse su di esse.Nel mondo ideale questo sarebbe molto semplice, con una sola semplice regola CSS:

tr:hover { background: red; }

Sfortunatamente, le versioni precedenti di IE non supportano il selettore :hover su elementi diversi da A.Quindi dobbiamo usare JavaScript.

In tal caso, definirò una classe di tabella "evidenziabile" per contrassegnare le tabelle che dovrebbero avere righe posizionabili.Effettuerò il cambio dello sfondo aggiungendo e rimuovendo la classe "evidenzia" sulla riga della tabella.

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

Tutto quello che devi fare ora è aggiungere la classe "evidenziabile" a qualsiasi tabella desideri:

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

Answer 4

Ho apportato una leggera modifica a @swilliams codice.

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

Questo mi permette di avere una tabella con una riga di intestazione che no essere evidenziato.

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

Answer 5

Puoi fare qualcosa per ogni riga, in questo modo:

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

Quindi, nel corpo di quella funzione, hai accesso a ciascuna riga, una alla volta, nella variabile 'row'.È quindi possibile chiamare Event.observe(row, ...)

Quindi, qualcosa del genere potrebbe funzionare:

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

Answer 6

Ho trovato una soluzione interessante per lo sfondo delle righe, le righe evidenziate al passaggio del mouse, senza JS.Qui è collegamento

Funziona in tutti i browser.Per IE6/7/8...

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

E per Safari utilizzo la posizione di sfondo negativa per ciascun TD.