Modificare colore cella

[Ken]

Ciao a tutti, mi trovo a dover affrontare un problema che non so risolvere.
Avevo già postato tempo fa riguardo un problema simile che, grazie al vostro
aiuto, sono riuscito a risolvere.
Ora però mi trovo a dover affrontare un altro scoglio alquanto ostico, visto
che di javascript non ne so quasi nulla...

Praticamente ho una serie di 10 checkbox all'interno di un form html
(inserito in una pagina php)
Successivamente ho una cella all'interno di una tabella in cui è contenuto
un numero che passo dinamicamente con php.
Quello che vorrei ottenere è che:

- se il numero di checkbox selezionate è inferiore al numero contenuto nella
cella lo sfondo resta bianco
- se il numero di checkbox selezionate è uguale al numero contenuto nella
cella lo sfondo diventa verde
- se invece il numero di checkbox selezionate è superiore al numero nella
cella lo sfondo diventa rosso

Sapete aiutarmi?
Grazie mille a tutti,
Ken

[Cristiano Larghi]

In data Wed, 11 Jan 2006 17:12:14 GMT, Ken ha scritto:

[CUT]
Ciao, ti dò 2 dritte per iniziare, poi sbattici un po' la testa e posta il
risultato.

Post by Ken
Praticamente ho una serie di 10 checkbox all'interno di un form html
(inserito in una pagina php)
Successivamente ho una cella all'interno di una tabella in cui è contenuto
un numero che passo dinamicamente con php.

Diamo alla cella id="MiaCella". Per ottenere un riferimento alla cella:
http://www.criosoftware.it/default14.aspx

Post by Ken
- se il numero di checkbox selezionate è inferiore al numero contenuto nella
cella lo sfondo resta bianco

Contiamo le checkbox selezionate (alla function passare come parametro la
form, che sarà document.forms[0])
function Conta(f) {
var conteggio=0;
for(var i=0;i<f.elements.length;i++)
if(f.elements[i].type=="checkbox"&&f.elements[i].checked)
conteggio++;
return conteggio;
}
e leggiamo questo numero:
var NumeroInCella=parseInt(GetRef('MiaCella').innerHTML,10);
Da qua in poi hai quindi entrambi i numeri, ti basta confrontarli e di
conseguenza colorare lo sfondo della cella, es.
GetRef("MiaCella").style.backgroundColor="red";

Prova un po' e posta il risultato.

[ZER0]

On Thu, 12 Jan 2006 09:32:30 +0100, Cristiano Larghi wrote:

Premesso che era praticamente la stessa cosa che aveva chiesto all'epoca:

http://groups.google.it/group/it.comp.lang.javascript/browse_thread/thread/7143f4870d7270c4/58a10511d1440ae1

Post by Cristiano Larghi
GetRef("MiaCella").style.backgroundColor="red";

Io continuo a dire che la nomenclatura della funzione che prendesti da me :P è
errata; sia per lo standard js sia perché crea confusione con l'omonima
funzione GetRef... riporterei quantomeno la "g" iniziale minuscola.

[Cristiano Larghi]

Post by ZER0
Io continuo a dire che la nomenclatura della funzione che prendesti da me :P è
errata; sia per lo standard js sia perché crea confusione con l'omonima
funzione GetRef... riporterei quantomeno la "g" iniziale minuscola.

troppo tardi, la ho usata e la hanno usata dappertutto così ... rimuovo il
tuo riferimento? (c'è un tuo riferimento? non ho controllato ma penso di
sì).
Se vuoi la riscrivo da zer0 (eh eh), ma sinceramente non saprei in che
altro modo scriverla ... ossia, non è che fa giochetti chissà che strani, è
abbastanza basilare non trovi? Vero che la ho presa da un tuo post, ma vero
che è veramente basilare, non è un giochetto con commenti condizionali,
prototype con hackeraggi strani o altro ... ossia, è una function veramente
semplice e basilare.

[ZER0]

Post by Cristiano Larghi

Post by ZER0
Io continuo a dire che la nomenclatura della funzione che prendesti da me :P è
errata; sia per lo standard js sia perché crea confusione con l'omonima
funzione GetRef... riporterei quantomeno la "g" iniziale minuscola.

troppo tardi, la ho usata e la hanno usata dappertutto così ...

Puoi sempre modificarla sul sito, e da qui in poi usare la forma corretta,
almeno sul NG.

Ti ripeto, è errata sia per nomenclatura sia perché ha lo stesso nome di una
funzione vbs, ma fa cose ben diverse.

Cmq, per quanto mi riguarda è principalmente per evitare confusione "al
popolo".

Post by Cristiano Larghi
rimuovo il tuo riferimento?

Troppo tardi :P

Post by Cristiano Larghi
Se vuoi la riscrivo da zer0 (eh eh), ma sinceramente non saprei in che
altro modo scriverla ... ossia, non è che fa giochetti chissà che strani, è
abbastanza basilare non trovi?

Si, infatti. L'unica cosa in più è l'associazione dello style per NS4.x, anche
quella una banalità però all'epoca non era stata presa in considerazione da
molti.

Ma dato che la paternità è ugualmente mia :) E che l'hai presa da
me, vorrei solo che fosse usata nella sua forma almeno sul NG e sul sito.

Poi internamente tu puoi utilizzarla come meglio ti aggrada, per carità, non
ho intenzione di modificare le tue abitudini; e di certo tu non farai
confusione con funzioni omonime.

Al massimo ti ripeto il consiglio sulla nomenclatura, ma se sta bene a te e
finché non lavori a più mani, puoi utilizzare anche quella di Visual Basic per
JS.

[Cristiano Larghi]

Post by ZER0
Puoi sempre modificarla sul sito, e da qui in poi usare la forma corretta,
almeno sul NG.

Ho capito quello che dici, ma io uso e userò sempre GetRef. Se la cambio
poi so già che continuerò in questo newsgroup a indicare il link e poi "per
usarlo GetRef(...)", dopodiché "non funziona" e io "acc scusa javascript è
case-sensitive" etc etc, mi conosco, in intranet e siti web dovrei
continuare ad usare GetRef e non mi ricorderò mai di cambiarla per il
newsgroup.
Se vuoi inserisco questo tuo appunto nella pagina.

[ZER0]

Post by Cristiano Larghi

Post by ZER0
Puoi sempre modificarla sul sito, e da qui in poi usare la forma corretta,
almeno sul NG.

Ho capito quello che dici, ma io uso e userò sempre GetRef.

Anche se non condivido la scelta di mischiare la notazione VB con quella JS,
personalmente puoi fare come più ti aggrada, te l'ho detto :)

Ma quando si risponde alle persone (soprattutto se newbie) bisognerebbe
indirizzarli sulla strada corretta (ovvero, evitare di mischiare nomenclature
diverse); se poi una volta smesso di essere niubbi vorranno anche fare un po'
di mix, è un altro discorso.
Lo sai che sulla "corretta istruzione e formazione" son fissato.

Post by Cristiano Larghi
Se la cambio
poi so già che continuerò in questo newsgroup a indicare il link e poi "per
usarlo GetRef(...)", dopodiché "non funziona" e io "acc scusa javascript è
case-sensitive" etc etc, mi conosco, in intranet e siti web dovrei
continuare ad usare GetRef e non mi ricorderò mai di cambiarla per il
newsgroup.

Puoi almeno fare un tentativo; tanto lo sai che ci sono qua io che ti riprendo
nell'eventualità che tu lo faccia. :P

[Cristiano Larghi]

Post by ZER0
Lo sai che sulla "corretta istruzione e formazione" son fissato.

Eh, lo so ... sai che io invece no ... :-/

Post by ZER0

Post by Cristiano Larghi
Se la cambio
poi so già che continuerò in questo newsgroup a indicare il link e poi "per
usarlo GetRef(...)", dopodiché "non funziona" e io "acc scusa javascript è
case-sensitive" etc etc, mi conosco, in intranet e siti web dovrei
continuare ad usare GetRef e non mi ricorderò mai di cambiarla per il
newsgroup.

Puoi almeno fare un tentativo; tanto lo sai che ci sono qua io che ti riprendo
nell'eventualità che tu lo faccia. :P

Ok, ci penso ... il problema è che anche il sito è pieno di esempi da
scaricare con la GetRef. Devo mettere mano al sito perché vorrei inserire
una cosetta, giurin giureta appena riesco te la sistemo da GetRef a getRef.

[Ugo]

...cut...

Post by ZER0
Ti ripeto, è errata sia per nomenclatura

Cosa vuol dire "per lo standard js la nomenclatura della funzione
è errata "?

[ZER0]

Post by Ugo
Cosa vuol dire "per lo standard js la nomenclatura della funzione
è errata "?

Perché in js si utilizza la stessa nomenclatura di java.
Serve a rendere il codice più comprensibile già ad una prima lettura,
esattamente come fa la notazione ungherese.

Nel caso specifico, una classe inizia con la lettera maiuscola, mentre
variabili, metodi e proprietà iniziano sempre con lettere minuscole.

Esempio:
var myArray = new Array();

Array è una "classe", non un'istanza, quindi ha la prima lettera maiuscola; a
differenza di myArray.

Stesso discorso dicasi per le funzioni e metodi:

myArray.sort();

e non:
myArray.Sort();

così come:

alert("hello world");

e non:
Alert("hello world");

Ovviamente non tutti i linguaggi seguono la stessa nomenclatura, ad esempio
Visual Basic preferisce la lettera maiuscoma anche per funzioni (GetRef,
appunto).
Non è che ce ne sia una migliore oggettivamente, dipende dai gusti personali
alla fin fine, ma quello che si dovrebbe evitare sempre di fare è mischiare
nomenclature diverse.
Ogni linguaggio ha la sua nomenclatura predefinita, usata per definirne le
funzioni e oggetti "core", e si dovrebbe continuare a usare quella.

[Ugo]

Post by ZER0

Post by Ugo
Cosa vuol dire "per lo standard js la nomenclatura della funzione
è errata "?

Perché in js si utilizza la stessa nomenclatura di java.
Serve a rendere il codice più comprensibile già ad una prima lettura,
esattamente come fa la notazione ungherese.

...

Grazie e gentile come al solito

[Ken]

http://groups.google.it/group/it.comp.lang.javascript/browse_thread/thread/7
143f4870d7270c4/58a10511d1440ae1

Giuro che prima di postare sui NG faccio una bella ricerchina su google
gruppi! ;-)
Ho cercato ma non ho trovato niente... grazie mille per le dritte, ora provo
a smanettarci un pò e vedere se riesco a farci saltare fuori qualcosa.
Probabilmente vi romperò nuovamente le scatole dal momento che di javascript
ne so zero.
Ciao e grazie,
Ken

[Ken]

Post by Cristiano Larghi
Prova un po' e posta il risultato.

Ragazzi grazie a tutti per l'aiuto! Ho ancora un piccolo problema da
sistemare ma ora sembra funzionare.
Mi ero anche dimenticato (come mi avete fatto notare) che avevo postato
praticamente la stessa domanda qualche mese fa, che patacca...
Questo è quello che ho fatto in base anche ai suggerimenti dell'altra volta:

<script type='text/javascript'>
function conteggio( sender ){
var obj=document.getElementById('idcella');
iCount=parseInt(obj.firstChild.nodeValue,10)+(sender.checked?1:-1);
obj.firstChild.nodeValue=iCount;
obj.style.backgroundColor=(iCount == 3 )?'lightgreen':'orange';
}
</script>

Nella cella interessata poi ho scritto:
<td id='idcella' bgcolor=lightgreen>3</td>

Infine nelle checkbox ho inserito questo:
<input type=checkbox name='c1' onclick='conteggio(this);'>

Tutto funziona, l'unico problema che ho è che il numero nella cella viene
modificato in base a quante checkbox vengono selezionate/deselezionate.
Io vorrei che rimanesse sempre quello (nell'esempio che ho fatto è 3)

Ultima cosa, lo script viene lanciato ogni volta che si
seleziona/deseleziona una casella, ma non al caricamento della pagina.
Esiste il modo per effettuare un controllo subito appena la pagina viene
caricata?
Grazie,
Ken

[Nando]

Post by Ken
<script type='text/javascript'>
function conteggio( sender ){
var obj=document.getElementById('idcella');
iCount=parseInt(obj.firstChild.nodeValue,10)+(sender.checked?1:-1);
obj.firstChild.nodeValue=iCount;
obj.style.backgroundColor=(iCount == 3 )?'lightgreen':'orange';
}
</script>
<td id='idcella' bgcolor=lightgreen>3</td>
<input type=checkbox name='c1' onclick='conteggio(this);'>
Tutto funziona, l'unico problema che ho è che il numero nella cella viene
modificato in base a quante checkbox vengono selezionate/deselezionate.
Io vorrei che rimanesse sempre quello (nell'esempio che ho fatto è 3)
Ultima cosa, lo script viene lanciato ogni volta che si
seleziona/deseleziona una casella, ma non al caricamento della pagina.
Esiste il modo per effettuare un controllo subito appena la pagina viene
caricata?

Visto che usi le variabili globali, creane una, da inizializzare poi al
caricamento della pagina (onload), che memorizzi il riferimento alla cella
della tabella, così non fai ogni volta getElementById. Poi, il valore nella
cella della tabella cambia perché gli dici tu di cambiare, con l'istruzione
obj.firstChild.nodeValue=iCount
Infine, per quanto riguarda l'esecuzione dello script al caricamento della
pagina, devi inserire qualcosa all'interno dell'handler dell'evento load
(onload)... e ti serve la funzione che ha scritto Cristiano, perché non
puoi riferirti solo ad una checkbox, ma devi contarle tutte (NB usa proprio
la funzione di Cristiano... magari chiamala conta(), con la "c" minuscola
:-)).
Riassumendo:

<script type="text/javascript">
// Variabili globali
var objTableCell=null,objForm=null,refValue=0,nowChecked=0;
// Funzioni
function setBackground() {
objTableCell.style.backgroundColor = ( nowChecked>refValue?'red':(
nowChecked<refValue?'orange':'green' ) );//Tutto su una riga!!!
};
function conta() {
for(var cont=0,i=0,n=objForm.elements.length;i<n;i++)
if (objForm.elements[i].type=="checkbox" &&
objForm.elements[i].checked) cont++;//Tutto su una riga!!!
return cont;
};
function conteggio( sender ){
nowChecked+=(sender.checked?1:-1);
setBackground();
//Le due istruzioni di sopre si possono riscrivere in forma compatta:
// setBackground(nowChecked+=(sender.checked?1:-1));
};
// Al caricamento della pagina
window.onload=function() {
objTableCell=document.getElementById('idcella');
objForm=document.forms['nomeDellaFormContenenteLeCheckbox'];
//Qui sopra mettici il nome della form che contiene le checkbox!!!
refValue=parseInt(objTableCell.firstChild.nodeValue,10);
nowChecked=conta();
setBackground();
//Le due istruzioni di sopre si possono riscrivere in forma compatta:
// setBackground(nowChecked=conta());
};
</script>

PS(1): la funzione setBackground imposta il background della cella:
-arancione se numero di checkbox spuntate<valore nella cella della tabella
-verde se numero di checkbox spuntate=valore nella cella della tabella
-rosso se numero di checkbox spuntate>valore nella cella della tabella

PS(2): ho assunto che il valore nella cella della tabella non debba essere
modificato; se così non è, il valore della variabile refValue deve essere
ricalcolato ogni volta

PS(3): forse il tutto si potrebbe anche riscrivere evitando tutte quelle
variabili globali...

Prova un po', adattalo alle tue esigenze e fammi sapere se ho scritto
qualche fesseria :)

[Ken]

Post by Nando
Prova un po', adattalo alle tue esigenze e fammi sapere se ho scritto
qualche fesseria :)

Grazie, ora ci smanetto un pò!
Ken

[Nando]

Post by Ken

Post by Nando
Prova un po', adattalo alle tue esigenze e fammi sapere se ho scritto
qualche fesseria :)

Grazie, ora ci smanetto un pò!

Figurati, spero ti sia utile... e non dimenticare di farmi sapere, sto
imparando pure io :)

[Ken]

Post by Nando
fammi sapere se ho scritto
qualche fesseria :)

Quali fesserie, lo script funziona alla perfezione.
Il codice che hai realizzato è stato pensato per funzionare per un intero
form al quale diamo come id lo stesso che poi passeremo a

objForm=document.forms['form1'];

Il problema non sorge se io ho una singola riga con N checkbox (tutte nel
form1)
Ma se io avessi all'interno di form1 diverse righe ognuna da N checkbox?
Avrei la necessità di effettuare questo controllo per ogni singola riga e
non per l'intero form...

Ho provato a paciugarci sopra cercando di aggirare il problema con <DIV
id='form1'>, <DIV id='form2'> ecc.. ecc..
ma non ho ottenuto nessun risultato funzionante.
Ho inoltre fatto altri innumerevoli tentativi cercando di trovare la
soluzione ma sembra proprio che il tuo script funzioni *solo* se utilizzato
con <form id='form1'>, <form id='form2'> ecc.. ecc..

Ora provo a riguardarci di nuovo ripartendo da zero, se ti vengono idee sono
sempre quà!
Grazie,
Ken

[Nando]

Post by Ken
Quali fesserie, lo script funziona alla perfezione.

Bene.

Post by Ken
Il codice che hai realizzato è stato pensato per funzionare per un intero
form al quale diamo come id lo stesso che poi passeremo a
objForm=document.forms['form1'];

Post by Ken
Praticamente ho una serie di 10 checkbox all'interno di un form html

Ma se io avessi all'interno di form1 diverse righe ognuna da N checkbox?
Avrei la necessità di effettuare questo controllo per ogni singola riga e
non per l'intero form...

Uè Ken, e le cose dille tutte insieme, non un pezzettino alla volta :-)
Non capisco una cosa, però... ad ogni gruppo di checkbox è associata una
cella di tabella? Oppure vi è una sola cella, e quindi un solo numero di
riferimento valido per tutti i gruppi di checkbox?
Vabbè, ci si pensa domani, magari... ora ho troppo sonno -__^

[Ken]

Post by Nando
Uè Ken, e le cose dille tutte insieme, non un pezzettino alla volta :-)

Hai ragione, ma non volevo spaventarvi! Tantopiù che pensavo che ottenuto il
risultato per una riga poi potevo applicarlo anche a tutte le altre...

Post by Nando
Non capisco una cosa, però... ad ogni gruppo di checkbox è associata una
cella di tabella?

Esatto! (scusate, ma mi spiego sempre da schifo)

ES:
<form id='form1'>
riga 1 con 10 checkbox (una cella per ognuna) + l'11esima cella dove è
contenuto il numero di controllo della riga 1 (il cui sfondo deve cambiare
in base al numero di checkbox selezionate nella riga 1)

riga 2 con 10 checkbox (una cella per ognuna) + l'11esima cella dove è
contenuto il numero di controllo della riga 2 (il cui sfondo deve cambiare
in base al numero di checkbox selezionate nella riga 2)
</form>
ecc...
ecc...

Comunque dopo un'altra ora e mezza di strippo e grazie al tuo codice
(finalmente sto iniziando a capirci qualcosa di js...)
ho ottenuto questo:

*****************************
<script type='text/javascript'>
var refValue = *valore_di_controllo*;

function colore( sender ){
obj=document.getElementById('cella1');
refValue"=refValue+(sender.checked?1:-1);
obj.style.backgroundColor=( refValue>?'orangered':(
refValue<?'orange':'lightgreen' ) );
}
</script>
*****************************

Così mi funziona alla perfezione, l'unica cosa che gli manca è il controllo
all'apertura della finestra.
Dal tuo codice mi sembra di capire che window.onload=function() controlla
all'interno del form quante checkbox sono selezionate e poi avvia la
funzione per il colore di sfondo.
Come faccio ad effettuare tale controllo senza utilizzare il form?
Devo attribuire un id univoco ad ogni cella e controllarle tutte ad una ad
una per ogni riga all'apertura della finestra?
Mumble mumble.....

Post by Nando
Vabbè, ci si pensa domani, magari... ora ho troppo sonno -__^

Buon riposo, io invece vado a mangiare che per stare dietro a questo
inghippo ho saltato la cena...
Ciauz!
Ken

[Ken]

"Ken" <***@lo.spam> ha scritto nel messaggio news:FeBxf.125611$***@twister1.libero.it...
[CUT]

Ore 6 e 30 del mattino... lavoro finito! ;-)
Vi ringrazio a tutti, è stata una lunga maratona ma tutto sommato
divertente, alla fine la cosa più bella è essere riusciti a fare ciò che si
voleva...
Ho risolto tutti i problemi facendo delle modifiche sostanziali a tutta la
struttura della tabella.
Ora non ho più le checkbox ma:

<select name='L1' onchange='coloreL1"(this);'>
<option...
<option...

Ogni volta che si seleziona un valore dal select viene richiamata la
funzione coloreL1

var refValue1= "variabile_dal_php";
var ndcl1 = ".variabile_dal_php.";
function coloreL1( sender ){
obj=document.getElementById('cella1');
if (sender.value == '0'){ refValue1++; ndcl1 = 1;}
if (ndcl1 == '1' && sender.value != '0'){ refValue1--; ndcl = 0;}
obj.style.backgroundColor=(
refValue>".variabile_dal_php."?'orangered':(
refValue1<".variabile_dal_php."?'orange':'lightgreen' ) );
}

Il fatto che venga richiamata la funzione appena si apre la finestra non
l'ho risolto ma sono riuscito comunque ad aggirare il problema utilizzando
il php.
Dal momento che è il php stesso che passa le variabili allo script js,
anzichè far partire gli script all'apertura della pagina ho pensato di
effettuare tutti i controlli iniziali direttamente dal php che mi formatta
la pagina (i colori) correttamente.
Poi, per ogni evento (onchange) ci pensa a tutto lo script js.

Ragazzi, grazie a tutti per la disponibilità!
Sono sicuro però che ci risentiremo molto presto... ;-)
Ciao,
Ken

PS: ora che ho avuto un approccio (seppur marginale) con il javascript devo
ammettere che è molto divertente... incasinato ma divertente!

[Nando]

Post by Ken
PS: ora che ho avuto un approccio (seppur marginale) con il javascript devo
ammettere che è molto divertente... incasinato ma divertente!

Mi fa piacere che tu abbia concluso :)
Mi permetto solo di darti un consiglio per il futuro: prima di mettere mano
al codice, cerca di definire nella maniera più precisa e dettagliata
possibile "cosa" deve essere fatto (analisi); solo successivamente passa al
codice... Può sembrare una perdita di tempo mentre, invece, di tempo te ne
fa risparmiare un casino e ti porta a scrivere codice molto più pulito e,
di conseguenza, molto più facilmente manutenibile. E javascript ti apparirà
meno "incasinato" e ancor più divertente :)