selezione attiva riga tabella

[luckino69]

Ciao a tutti,
sto incontrando un problema nel cambiare il colore di una riga di una tabella se selezionata.
Ho applicato queste regole:

.result tr {
	background: #ced8fd url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
	border: 1px solid #8d92ff;
}

.result tr:hover td {
	background: #f6f6f6 url(images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x;
	cursor:pointer;
}
.results tr:active td {
	background: #f6f6f6 url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% 50% repeat-x;
	cursor:pointer;
}

Al passaggio del mouse tutto ok, cambia il colore regolarmente alla riga, ma una volta che clicco sopra alla riga cambia colore finchè tengo cliccato.
Mi sono dimenticato qualcosa?
Non so se è rilevante, ma al momento non ho messo nella riga una checkbox per darla come selezionata (anche perchè non ho ancora ben capito come fare).
Grazie ciao

[Mich_]

La condizione "attivo" e` verificata finche` il bottone del mouse e` tenuto premuto
La condizione "con focus" e` invece indipendente dal mouse (e si puo` realizzare anche con il pulsante tab, per passare da un link all'altro)

In linea di massima non conviene mettere gli eventi sul <tr>, dato che e` sempre "coperto" completamente dai vari <td> e <th> e ci sono browser che non formattano correttamente il <tr>.


L'oggetto checkbox e` una cosa diversa: e` un oggetto appartenente ad un form, il cui valore (value) viene inviato al server all'invio del form.

In qualche caso si vuole estendere la funzionalita` (o anche solo la formattazione) del chckbox all'intero <fieldset> o comunque ad un contenitore che racchiude il checkbox stesso: questo non si puo` fare tramite CSS da solo: e` necessario un "aiuto" tramite JS.
Per la realizzazione occorre conoscere le condizioni della pagina, del form, del checkbox e del contenitore, per cui non riesco ad essere piu` preciso.

[luckino69]

Ti ringrazio per la risposta,
l'intento della pagina è quello di avere una tabella con i dati, ed in alto ci sono dei bottoni "modifica" ed "elimina", selezionando la riga e cliccando sul bottone "elimina" elimino dal db quella riga.
Al momento ancora ho fatto solo la tabella con i dati, è per questo che chiedevo per il checkbox ad ogni riga.
Grazie ciao

[Mich_]

IL checkbox ci puo` stare nella riga della tabella.
I tuoi bottoni "modifica" ed "elimina" saranno di fatto due <input type="submit" />con value diversi

Per "colorare" la riga in base al fatto se la checkbox e` selezionata o meno, e` necessario JS: infatti una proprieta` CSS non puo` estendersi ad oggetti antenati (padri , nonni, ecc) di un oggetto: solo ai discendenti si possono estendere proprieta` (operatore > oppure operatore spazio nel selettore).
Faccio notare che tale JS e` comunque non-intrusivo, per cui lo puoi usare senza problemi (se non c'e` JS attivo, comunque il checkbox viene selezionato, anche se la ria non viene colorata).


PS: piu` che un checkbox, mi sembra che il "bottone" debba essere un radio (ne puo` essere selezionato solo uno)

[luckino69]

Ti ringrazio davvero molto per la spiegazione.
Ora mi resta da chiedere come fare la parte js perchè non ne ho idea..
Comunque forse è meglio che chiedo nella sezione giusta a questo punto.
Grazie ancora

[Mich_]

Si`, devi chiedere in JS.

Ma prima devi implementare la "riga", con i vari id e class sistemati correttamente, altrimenti non riescono ad aiutarti.
E il JS va realizzato DOPO che il CSS e` a posto e funziona, altrimenti ti trovi a dover fare le cose due volte.

In pratica:
1. realizza la struttura HTML: in tale struttura ricordati di inserire tutte le classi e gli id che servono
2. realizza il CSS per tale struttura
3. chiedi in JS: infatti il JS agira` sulla formattazione della riga. Fondamentalmente il JS potrebbe essre una cosa del tipo:

document.getElementById('ID_DELLA_RIGA').style.backgroundColor = "#f6f6f6";
oppure
document.getElementById('ID_DELLA_RIGA').className = "CLASSEATTIVO";