cambiare colore td quando flaggo una checkbox

[stewe19]

Ciao a tutti!

premetto di essere abbastanza a livelli da principiante in js...volevo sapere come fare a creare un effetto..

ho un calendario creato in asp dove, per ogni giorno del mese è associato un input checkbox...io vorrei fare in modo che quando flaggo il checkbox mi diventi giallo il td in cui si trova il numero del giorno...e se lo sflaggo torna al colore originario..ossia verde....

so che questo è possibile con js ma non ricordo proprio come si fa!

[Xinod]

basati sulle classi css, cosi' puoi sempre sfruttare regole css per variare l' aspetto del tuo documento

un esempio semplicissimo, poi vediamo se ci sono complicazioni determinate da quanto e' gia' in uso

<td><input type="checkbox" onclick="segnaTD(this)" /></td>

function segnaTD(ck){
  var td=ck.parentNode;
  td.className=(ck.checked)?'red':'';
}

e aggiungi una classe nel css

td.red {
  background-color:#f00;
}

se il tuo markup e' piu' complesso di <td><input> postane un esempio

[stewe19]

ok grazie funziona!

ora pero vorrei che tutti i td dei giorni non selezionati siano di colore verde...ho provato a mettere uno style nel td dando il background-color verde ma in questo modo non prende più il colore quando flaggo...

[Xinod]

posta il codice, solo quello che serve (xhtml e css)

probabilmente la specificita' della regola css che setta il background verde e' superiore a quella che lo setta in rosso

[stewe19]

<style>
td.red {background-color:#FFCC00;}
</style>
<script type="text/javascript">
function segnaTD(ck){
var td=ck.parentNode;
td.className=(ck.checked)?'red':'';
}


</script>


<table align="center" border="1" cellspacing="1" width="70%" height="70%" cellpadding="0">
<%
Dim iRowsLoop, iColumnsLoop
for iRowsLoop = 1 to iRows%>
<tr>
<%for iColumnsLoop = 1 to iColumns
if aCalendarDays((iRowsLoop-1)*7 + iColumnsLoop) > 0 then%>
<td valign="center" align="center" width="10%">
<input type="checkbox" name="d" value="<%=aCalendarDays((iRowsLoop-1)* 7 + iColumnsLoop)%>" onclick="segnaTD(this)" />
<%=aCalendarDays((iRowsLoop-1)* 7 + iColumnsLoop)%>
</td>
<%else%>
<td valign="center" align="center" width="10%"><font face="Verdana" size="2"></font></td>
<%end if
next%>
</tr>
<%next%>
</table>

[Xinod]

non postare asp o php, ma l' xhtml prodotto da questi linguaggi
io, per esempio, non leggo speditamente asp e mi distrae

comunque vedo che non usi bene i css, approfondisci

dai un id alla tabella
<table align="center" id="calendario" border="1" cellspacing="1" width="70%" height="70%" cellpadding="0">

aggiungi una regola generica per tutti i td di calendario e modifica red
<style>
#calendario td {background-color:#0c0;}
#calendario td.red {background-color:#fc0;}
</style>

ciao

[stewe19]

giusto!

infatti ora è ok!

in fatti sto piano piano modificando tutto il calendario perche lo prelevato da un sito e lo sto ritoccando secondo le mie esigenze...

ora però ho 1 ritocchino e 1 problemino da risolvere...

il ritochhino è che quando flaggo una check e il td diventa giallo e per caso aggiorno la pagina il td torna ad avere il colore originario pur rimanendo flaggato...io vorrei che, se flaggato, rimanga giallo pur aggiornando la pagina.

il problema è che, se un td è di colore rosso(quindi prenotato) e io flaggo giustamente il td diventa giallo....ma se lo sflaggo poi torna il colore originario e non più rosso..

quindi dovrei creare una condizione in js in cui dico che se il td è fleggato deve sempre essere giallo e se è sfleggato deve avere il colore che aveva in precedenza(o originario, quini verde, o rosso, se prenotato)

i css li riposto:

<style>
#calendario td {background-color:#0c0;} ----> se il td è "vergine"
#calendario td.giallo {background-color:#fc0;} ---->se il td è in fase di "prenotazione"
#calendario td.red {background-color:#FF0000;} --->se il td è "prenotato"
#calendario td.vuoto {background-color:#fff;} --->questo non centra
</style>



questo è il tuo Js per il cambio del colore del td:

<script type="text/javascript">
function segnaTD(ck){
var td=ck.parentNode;
td.className=(ck.checked)?'giallo':'';
}
</script>


questo è il codice HTML(ho messo la condizioni senza codice ASP ma spiego come si comporta):

<tr>
<td valign="center" align="center" width="10%"
se il td è prenotato allora ci sarà classe:
class="red"
in caso contrario sara' vergine.
>
<input type="checkbox" value="giorno" name="giorno" onclick="segnaTD(this)" />
giorno
</td>
</tr>

[stewe19]

ok il problema l'ho risolto cosi':

function togliTD(ck){
var td=ck.parentNode;
td.className=(ck.checked)?'viola':'red';
}

ora devo risolvere l'altro...vorrei che quando aggiorno la pagina si svuotino le checkbox...ossiaspariscano eventuali flag messi in precedenza..