Ciao a tutti,
ho un piccolo problema con alcune funzioni DOM che, se eseguite in un certo modo funzionano, se cambia l'ordine invece quaclosa non va e, a livello di codice, non ne ho assolutamente capito il motivo.
Il codice dell' intera pagina HTML è il seguente (specifico subito che la pagina vera in realtà è generata dinamicamente in php, quindi con molte più tabelle e, ogni tabella, con molte righe, il tutto interagendo con un database, quindi non posso stravolgere i nomi degli oggetti più di tanto e, anche per quello, hanno nomi molto particolari).
Ora, sono presenti 4 funzioni javascript che fanno il seguente compito:codice:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Monete</title> <script type="text/javascript"> function clickCheck(tipoID){ if (document.getElementById(tipoID).getAttribute('checked') == null){ document.getElementById(tipoID).setAttribute('checked',''); ColoraCasella(tipoID); }else{ document.getElementById(tipoID).removeAttribute('checked'); document.getElementById(tipoID).innerHTML; ColoraCasella(tipoID); } ControlCheckTot(tipoID); } function clickCheckTot(tipoID){ stringaGen = tipoID.substring(0, (tipoID.length)-3); tipoMonete=new Array("1c", "2c","5c", "10c","20c", "50c","1e", "2e"); if (document.getElementById(tipoID).getAttribute('checked') == null){ // Seleziono tutte le caselle... for (i=0; i<tipoMonete.length; i++) { stri = stringaGen + tipoMonete[i]; document.getElementById(stri).setAttribute('checked',''); ColoraCasella(stri); } }else{ // Cancello tutte le caselle... for (i=0; i<tipoMonete.length; i++) { stri = stringaGen + tipoMonete[i]; document.getElementById(stri).removeAttribute('checked'); ColoraCasella(stri); } } ControlCheckTot(tipoID); } function ControlCheckTot(tipoID){ stringaGen = tipoID.substring(0, (tipoID.length)-3); tipoMonete=new Array("1c", "2c","5c", "10c","20c", "50c","1e", "2e"); col_array=tipoID.split("-"); bool = false; for (i=0; i<tipoMonete.length; i++) { stri = col_array[0] +"-"+ col_array[1] +"-"+ tipoMonete[i]; //alert("xx: '"+stri+"' "); if (document.getElementById(stri).getAttribute('checked') == null){ // se non è selezionato //alert("si: '"+stri+"' "); bool = true; } // se lo è non fa nulla } // Se tutti sono selezionati if (!bool){ // Allora spunto pure il totale stri = col_array[0] +"-"+ col_array[1] +"-tot"; //alert("tutti si: '"+stri+"' "); document.getElementById(stri).setAttribute('checked',''); ColoraCasella(stri); } // se lo è tolgo la spunta else{ // Allora spunto pure il totale stri = col_array[0] +"-"+ col_array[1] +"-tot"; //alert("qualcuno no: '"+stri+"' "); document.getElementById(stri).removeAttribute('checked'); ColoraCasella(stri); } } function ColoraCasella(tipoID){ if (document.getElementById(tipoID).getAttribute('checked') == null){ tipoNew = tipoID + "-TD"; document.getElementById(tipoNew).setAttribute('bgcolor','#FFFFFF'); } else { tipoNew = tipoID + "-TD"; document.getElementById(tipoNew).setAttribute('bgcolor','#000000'); } } </script> </head> <body> <CENTER> <table> <tr> <td></td> <td><form method="post" action="prova.php"> <input type="submit" value="Ricarica Pagina" /> </form></td> <tr><table> <table ALIGN="center" BORDER="1"> <TR ALIGN="center"><TD COLSPAN="10"><FONT SIZE="3">Prova</font></TD></TR> <TR ALIGN="center"><TD WIDTH="50">Anno</TD><TD WIDTH="30">1c</TD><TD WIDTH="30">2c</TD><TD WIDTH="30">5c</TD><TD WIDTH="30">10c</TD><TD WIDTH="30">20c</TD><TD WIDTH="30">50c</TD><TD WIDTH="30">1</TD><TD WIDTH="30">2</TD><TD WIDTH="30">tot</TD></TR> <TR ALIGN="center"> <TD WIDTH="50">2002</TD> <TD ID="AUS-2002-1c-TD" WIDTH="50"><input ID="AUS-2002-1c" onclick="clickCheck('AUS-2002-1c')" name="Check[AUS-2002-1c]" value="'.$idutente.'" type="checkbox"/></TD> <TD ID="AUS-2002-2c-TD" WIDTH="50"><input ID="AUS-2002-2c" onclick="clickCheck('AUS-2002-2c')" name="Check[AUS-2002-2c]" value="'.$idutente.'" type="checkbox"/></TD> <TD ID="AUS-2002-5c-TD" WIDTH="50"><input ID="AUS-2002-5c" onclick="clickCheck('AUS-2002-5c')" name="Check[AUS-2002-5c]" value="'.$idutente.'" type="checkbox"/></TD> <TD ID="AUS-2002-10c-TD" WIDTH="50"><input ID="AUS-2002-10c" onclick="clickCheck('AUS-2002-10c')" name="Check[AUS-2002-10c]" value="'.$idutente.'" type="checkbox"/></TD> <TD ID="AUS-2002-20c-TD" WIDTH="50"><input ID="AUS-2002-20c" onclick="clickCheck('AUS-2002-20c')" name="Check[AUS-2002-20c]" value="'.$idutente.'" type="checkbox"/></TD> <TD ID="AUS-2002-50c-TD" WIDTH="50"><input ID="AUS-2002-50c" onclick="clickCheck('AUS-2002-50c')" name="Check[AUS-2002-50c]" value="'.$idutente.'" type="checkbox"/></TD> <TD ID="AUS-2002-1e-TD" WIDTH="50"><input ID="AUS-2002-1e" onclick="clickCheck('AUS-2002-1e')" name="Check[AUS-2002-1e]" value="'.$idutente.'" type="checkbox"/></TD> <TD ID="AUS-2002-2e-TD" WIDTH="50"><input ID="AUS-2002-2e" onclick="clickCheck('AUS-2002-2e')" name="Check[AUS-2002-2e]" value="'.$idutente.'" type="checkbox"/></TD> <TD ID="AUS-2002-tot-TD" WIDTH="50"><input ID="AUS-2002-tot" onclick="clickCheckTot('AUS-2002-tot')" name="Check[AUS-2002-tot]" value="'.$idutente.'" type="checkbox"/></TD> </TR> </form> </CENTER> </body> </html>
clickCheck(tipoID) <- viene evocata sul click di una casella (tranne quella di nome "tot" aggiunge o rimuove (A seconda che il click sia di spunta o di tolta di spunta) l'attributo checked, colorando di bianco o nero la casella).
clickCheckTot <-- Come prima ma agisce su TUTTE le caselle della riga, se quindi spuntata le spunta tutte e viceversa
ControlCheckTot <-- Controlla tutte le caselle della riga, se sono tutte spuntate spunta a sua volta la casella tot
ControlCheckTot <-- Semplicemente guarda se la checkbox ha l'attributo checked, se si la colora di nero, altrimenti di bianco.
Ora, se provate a far girare la pagina, il tutto funziona più o meno in modo corretto, nel senso:
Se io spunto le caselle queste le colora, se tolgo la spunta toglie il colore, se spunto appena carico la pagina la casella ToT mi colora tutte le caselle e mette la spunta a tutte le checkbox, se tolgo la selezione la rimuove in tutte.
E fin qui sarebbe tutto ok.... i problemi verificati però sono 2:
1) Se io spunto a mano tutte le caselle, alla spunta dell' ultima mi colora la casella ToT (perchè le vede tutte spuntate, ma non assegna ad essa la "v").
Pertanto, la parte di codice interessata è questa:
Pertanto, lui applica correttamente l'attributo checked alla casella giusta (stri), infatti la funzione dopo colora la casella proprio perchè "vede" questo attributo... ma allora perchè non mi compare la spunta?codice:function ControlCheckTot(tipoID){ [...] if (!bool){ // Allora spunto pure il totale stri = col_array[0] +"-"+ col_array[1] +"-tot"; document.getElementById(stri).setAttribute('checked',''); ColoraCasella(stri); } [...]
Allo stesso modo, un altro errore è il seguente:
2) Mettiamo che io, appena caricata la pagina, spunti la casella "1c"... sucessivamente spunto la casella "tot".
Tutta la riga diventa quindi nera e spuntata.. ora tolgo la spunta dalla casella "tot" e la riga viene tutta bianca (quindi ho rimosso tutti gli attributi checked dalle checkbox), però la casella "1c" rimane comunque spuntata (Anche se non ha l'attributo).
Viceversa, se appena caricata la pagina io spunto e poi tolto la spunta a "1c", poi clicco su "tot", tutte le caselle diventano nere (quindi tutte con attributo checked attivo) ma comunque non mi compare la "V" nella prima casella.
Ora, da spiegare scrivendo il problema sembra pure difficile, caricando il codice in 2 minuti si capisce qual'è ma per la soluzione....
Help me
E grazie in anticipo!
Rispondi quotando
