inerzia sensoriale "Rollover in file di tavoli, fare clic per comporre

Rollover sulle righe di tabelle, fare clic per comporre

Commenti 22 Dameris / Los_Angeles novembre, 2005 in Javascript .
Tags:

Questa piccola funzione è stata fatta da parte la copia del codice trovato in phpMyAdmin . Avevo bisogno di righe di tabelle di colore come il mouse passato attraverso di loro e colorare anche quando l'utente fa clic su di essi.

In JavaScript phpMyAdmin originale, lo stile con i colori di sfondo delle celle sono all'interno della <td>. Inoltre, come tutte le cellule hanno lo stesso colore di sfondo, semplicemente raccogliendo il colore della <td> prima e applicare in tutta la linea.

Come il mio definizioni di stile sono in file. Css, ho dovuto cambiare il modo di portarli. E come alcune colonne aveva i colori di sfondo e non altri, ho creato un array per memorizzare i valori originali. Poi quando l'utente muove il mouse in una <tr> con questa funzione, i colori di sfondo definito nel file. CSS sono conservati, e recuperati quando il mouse lascia la riga.

Le prime due variabili sono i colori che appaiono quando il mouse si trova sopra la linea (cor_onmouseover) e quando viene cliccato (cor_onmousedown). Per impostazione predefinita, sono rispettivamente un mascherino calce verde e una crema di arancia. Come potete vedere, non c'è nulla Manjo di nominare i colori esadecimali

Di seguito è riportato il codice JavaScript:

Testo normale

JavaScript:

cor_onmouseover = '# E7FFCE';
cor_onmousedown = '# FFCC99';
coresOriginais = Array ();
celula, linhaNumero, evento ) destacarLinha funzione (cellula, linhaNumero, evento)
(
; var celulas_filhas = null;
/ / Cerca di ottenere il <tr> o esce se il browser non può
typeof ( document. getElementsByTagName ) != 'undefined' ) { if (typeof (getElementsByTagName documento)! = 'undefined') (
'td' ) ; celulas_filhas = cella. getElementsByTagName ('td');
( typeof ( celula. cells ) != 'undefined' ) { ) Else if (typeof (celula. cellule)! = 'Non definito') (
celulas_filhas = cella. cellule;
{ Else ()
; return false;
)
; var = celulas_filhas celulas_filhas_qtd. lunghezza;
/ / Loop su tutti <td> 's
c = 0 ; c <celulas_filhas_qtd; c++ ) { for (c = 0, c celulas_filhas_qtd <c + +) (
; var corAtual = null;
; mescolato var = null;
; elemento celulas_filhas = [c];
/ / Questa operazione è necessaria perché se se nel file CSS esterno è
/ / In questo modo si preleva il colore
/ / IE 5 +;
elemento. currentStyle ) { if (elemento. currentStyl) (
'backgroundColor' ] ; corAtual = elemento. '[backgroundColor currentStyl'];
/ / Firefox, Moz
( window. getComputedStyle ) { ) Else if (window. getComputedStyle) (
( elemento, "" ) elstyle finestra = var. getComputedStyle (elemento, "")
'background-color' ) ; corAtual = elstyle. GetPropertyValue ('background-color');
)
/ / Da RGB a Hex
corAtual. indexOf ( "rgb" ) >= 0 ) { if (corAtual. indexOf ("RGB")> = 0) (
( corAtual. indexOf ( '(' ) + 1 , var = rgbStr corAtual. slice (corAtual. indexOf ('(') + 1,
')' ) ) ; corAtual. (')')); indexOf
( "," ) ; var = rgbValue rgbStr. (""); split
corAtual = "#";
; hexChars var = "0123456789abcdef";
var i = 0 ; i < 3 ; i++ ) { for (var i = 0, i <3; i + +) (
i ] . valueOf ( ) ; v var = rgbValue [i]. valueOf ();
v/ 16 ) + hexChars. charAt ( v% 16 ) ; + CorAtual = hexChars. CharAt (v / 16) hexChars +. CharAt (v 16%);
)
)
+ Cor_index linhaNumero = "+ _" c;
evento == 'over' && corAtual. toLowerCase ( ) != cor_onmousedown. toLowerCase ( ) ) { if (caso == 'oltre' & & corAtual. toLowerCase ()! = cor_onmousedown. toLowerCase ()) (
= Cor_onmouseover mosse;
= corAtual; coresOriginais [cor_index] = corAtual;
( evento == 'click' ) { ) Else if (== evento '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 (caso == 'out' & & corAtual. ToLowerCase ()! = Cor_onmousedown. ToLowerCase ()) (
; mescolato coresOriginais = [cor_index];
)
corNova ) { if (agitato) (
. style . backgroundColor = corNova; [Celulas_filhas c]. Stile. BackgroundColor = mosse;
)
)
; return true;
)

Per utilizzare, fare questo:

Testo normale

HTML:

onmouseout = "destacarLinha(this, 1, 'out');" onmousedown = "destacarLinha(this, 1, 'click');" > <Tr destacarLinha onmouseover = "(questo, 1, 'oltre')" onmouseout = "destacarLinha (questo, 1, 'out')" onmousedown = "destacarLinha (questo, 1, 'click');">

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

Ogni domanda, commento

Marcelo Benevides
Dude! Congratulazioni grande codice!

gabriel
Non ho potuto usare ...
come faccio a mettere questo codice in un HTML e visualizzare il loro funzionamento ... .. Spiacente 'M un principiante