Sensoriali inerzia "rollover in file di tabelle, fare clic per comporre

Rollover in file di tabelle, fare clic per comporre

Commenti 22 novembre 2005 in Javascript.
Tags:

Questa piccola funzione è stata fatta copiando il codice presente in phpMyAdmin. Ho dovuto colore le righe delle tabelle, come il mouse è andato attraverso di essi e colorare anche quando l'utente fa clic su di essi.

In phpMyAdmin Javascript originale, in stile con i colori di sfondo delle celle sono in <td>. Inoltre, come tutte le cellule hanno lo stesso colore di sfondo, basta prendere il colore del primo <td> e applicare su tutta la linea.

Come il mio definizioni di stile in file. Css, ho dovuto cambiare il modo di farli. E come alcune colonne aveva i colori di sfondo e non altri, ho creato un array per memorizzare i valori originali. Così, quando l'utente sposta il mouse in un <tr> con questa funzione, i colori di sfondo definito nel file. Css vengono memorizzati, recuperati e quando il mouse lascia la riga.

Le prime due variabili sono i colori che appaiono quando il mouse è sopra la linea (cor_onmouseover) e quando si fa clic (cor_onmousedown). Per impostazione predefinita, sono rispettivamente un terreno verde di calce e una crema arancione. Come potete vedere, ci manjo nulla di nominare i colori esadecimali

Di seguito è riportato il codice JavaScript:

Plain Text

JavaScript:

cor_onmouseover = '# E7FFCE';
= 'cor_onmousedown # FFCC99';
coresOriginais = Array ();
celula, linhaNumero, evento ) funzione destacarLinha (cellulare, linhaNumero, evento)
(
; var celulas_filhas = null;
/ / Provare a ottenere il <tr> o esce se il browser non riesce a
typeof ( document. getElementsByTagName ) != 'undefined' ) { if (typeof (getElementsByTagName document.referrer)! = 'undefined') (
'td' ) ; cell = celulas_filhas. getElementsByTagName ( 'td');
( typeof ( celula. cells ) != 'undefined' ) { Cellule) else if (typeof (cellula)! = 'Undefined') (
cell = celulas_filhas. cellule;
{ ) Else (
; return false;
)
; celulas_filhas_qtd var = celulas_filhas. lunghezza;
/ / Loop su tutti i <td> 's
c = 0 ; c <celulas_filhas_qtd; c++ ) { for (c = 0, c <celulas_filhas_qtd c + +) (
; var corAtual = null;
; mescolato var = null;
; celulas_filhas elemento = [c];
/ / Ha a che fare questo perché quando se i CSS in un file esterno è
/ / In questo modo, che ottiene il colore
/ / IE 5 +;
elemento. currentStyle ) { if (elemento. currentStyle) (
'backgroundColor' ] ; elemento = corAtual. currentStyle [ 'backgroundColor'];
/ / Firefox, Moz
( window. getComputedStyle ) { ) Else if (window. getComputedStyle) (
( elemento, "" ) elstyle var = finestra. getComputedStyle (elemento, "")
'background-color' ) ; = elstyle corAtual. getPropertyValue ( 'background-color');
)
/ / Da RGB a esadecimale
corAtual. indexOf ( "rgb" ) >= 0 ) { if (corAtual. indexOf ( "RGB")> = 0) (
( corAtual. indexOf ( '(' ) + 1 , rgbStr var = corAtual. slice (corAtual. indexOf ( '(') + 1,
')' ) ) ; corAtual. indexOf (')'));
( "," ) ; = rgbValues rgbStr var. split ( "");
corAtual = "#";
; hexChars var = "0123456789ABCDEF";
var i = 0 ; i < 3 ; i++ ) { for (var i = 0; i <3; i + +) (
i ] . valueOf ( ) ; var v = rgbValues [i]. valueOf ();
v/ 16 ) + hexChars. charAt ( v% 16 ) ; corAtual + hexChars = hexChars. charAt (v / 16) +. charAt (% v 16);
)
)
cor_index = linhaNumero + "_" + c;
evento == 'over' && corAtual. toLowerCase ( ) != cor_onmousedown. toLowerCase ( ) ) { if (event == 'over' & & corAtual. toLowerCase ()! = cor_onmousedown. toLowerCase ()) (
= Cor_onmouseover mosse;
= corAtual; coresOriginais [cor_index] = corAtual;
( evento == 'click' ) { ) Else if (event == 'click') (
corAtual. toLowerCase ( ) == cor_onmousedown. toLowerCase ( ) ) { if (corAtual. toLowerCase () == cor_onmousedown. toLowerCase ()) (
; mescolato coresOriginais = [cor_index];
{ ) Else (
= Cor_onmousedown mosse;
)
( evento == 'out' && corAtual. toLowerCase ( ) != cor_onmousedown. toLowerCase ( ) ) { ) Else if (event == 'out' & & corAtual. ToLowerCase ()! = Cor_onmousedown. ToLowerCase ()) (
; mescolato coresOriginais = [cor_index];
)
corNova ) { if (mosse) (
. style . backgroundColor = corNova; celulas_filhas [c]. stile. backgroundColor = mosse;
)
)
; return true;
)

Per utilizzare la funzione, fare quanto segue:

Plain Text

HTML:

onmouseout = "destacarLinha(this, 1, 'out');" onmousedown = "destacarLinha(this, 1, 'click');" > onmouseover <tr = "destacarLinha(this, 1,'over');" onmouseout = "destacarLinha(this, 1,'out');" onmousedown = "destacarLinha(this, 1,'click');">

Il primo argomento è il numero di riga nella tabella. E 'necessario conoscere la funzione di tornare ai colori originali. Turn it uno per uno, come le occorrenze di <tr> s.

Per qualsiasi domanda, commento