evidenziare le celle!!

[CeMax-2000]

Ciao a tutti ,

ho provato a fare una ricerca sul motore ma nulla riguardo al mio problema......

Allora vorrei che al passaggio del mouse in una tabella formata da X righe e da Y colonne (comunque ogni volta so quante righe/colonne ci sono!!, lo fa in automatico il PHP), mi venissero evidenziate tutte le celle e tutte le righe interessate dall'incrocio che viene formato da una cella.

Mi spiego meglio, avete presente excel?? beh! ad esempio se ho una tabella formata da 5 righe (numerate da 1 a 5) e 5 colonne (lettere da A a E) se io metto il mouse nella cella 3C mi devono venir evidenziate tutte le seguenti celle:

1C - 2C - 3C - 3A - 3B.

Sono stato abbastanza chiaro??

Inoltre la cella 3C dovrebbe avere un colore diverso rispetto agli altri, e si devono evidenziare anche le celle "padre" ( C e 3 ) in modo ovviamente diverso dagli altri due colori.

In ogni caso se ancora non è chiaro vi posto un'immagine che forse parla anche da sola!!.....

Per ora sono riuscito a fare quello che si vede alla sinistra in questo modo:

assegno un'id univoco ad ogni cella e con l'uso di mouseover e mouseout ottengo quello che si vede (a destra dell'immagine postata), quindi riesco soltanto ad evidenziare la cella su cui mi trovo e le celle "padri", ma non le celle di incrocio.

Grazie a quanti vorranno rispondermi

[Xinod]

ore piccole?

[Xinod]

puoi anche risolvere senza dare id alle singole celle,
un esempio veloce

<script type="text/javascript"> 
function evidenzia(ww,hh){
if(document.getElementById && document.getElementsByTagName){

	var t=document.getElementById('tabella');
	var rr=t.getElementsByTagName('TR');

	var c1="#ff0000"; // colore incontro
	var c2="#00ff00"; // colore squadre

		for(var r=0; r<=hh; r++){
			for(var c=0; c<=ww; c++){
				var cc=rr[r].getElementsByTagName('TD')[c];
				if((c==0 && r==hh)||(c==ww && r==0)) cc.style.backgroundColor=c2;
				else if((c==ww && r<=hh)||(c<ww && r==hh)) cc.style.backgroundColor=c1;
			}
		}
	}
}
</script>
<table border="1" id="tabella" cellspacing="0" cellpadding="3">
<tr><td>0,0</td><td>0,1</td><td>0,2</td><td>0,3</td><td>0,4</td></tr>
<tr><td>1,0</td><td>1,1</td><td>1,2</td><td>1,3</td><td>1,4</td></tr>
<tr><td>2,0</td><td>2,1</td><td>2,2</td><td>2,3</td><td>2,4</td></tr>
<tr><td>3,0</td><td>3,1</td><td>3,2</td><td>3,3</td><td>3,4</td></tr>
<tr><td>4,0</td><td>4,1</td><td>4,2</td><td>4,3</td><td>4,4</td></tr>
</table>
(4,3)

ciao ciao

[CeMax-2000]

Originariamente inviato da Xinod
ore piccole?

Anche tu però vero non scherzi mica eh!!! :gren:
é che devo terminare un programmino e ultimamente trovo l'ispirazione soltanto di notte



Comunque scusami se non ho risposto prima ma ieri sono dovuto uscire e sono rientrato molto tardi!!

Ora provo la tua soluzione e poi ti farò sapere, per adesso non posso dirti altro che grazie!! :metallica

[CeMax-2000]

Ok va bene (è solo l'inizio ma manca ancora qualche piccolo accorgimento.....)....

Per esempio come ritornare al colore iniziale ma ho risolto facendo un'altra funzione e rinominandola come "ripristina" ed ancora i campi con l'incrocio dove il numero di riga è uguale al numero di colonna mi devono ritornare di colore grigio scuro (come da immagini), ed infine quando sosto sulla cella la stessa deve essere colorata diversamente dalle altre!!!

Se ti riesce fammi sapere, intanto io ci provo anche se in javascript sono abbastanza scarsuccio!!!!

grazie :metallica

[CeMax-2000]

Bene ho fatto!!!

<script type='text/javascript'>
function evidenzia(ww,hh){
if(document.getElementById && document.getElementsByTagName){

var t=document.getElementById('tabella_incontri');
var rr=t.getElementsByTagName('tr');

var c1="colore_1"; //colore incontro
var c2="colore_2"; //colore squadre
var c3="colore_4"; //colore incrocio
var c4="colore_5"; //........
var c4="colore_6"; //........

for(var r=0; r<=hh; r++){
for(var c=0; c<=ww; c++){
var cc=rr[r].getElementsByTagName('TD')[c];

if(c==ww && r==hh) cc.style.backgroundColor=c5;//cc.style.font-size:17px
else if(c==0 && r==0) cc.style.backgroundColor=c4;
else if(c==r) cc.style.backgroundColor=c3;
else if((c==0 && r==hh)||(c==ww && r==0)) cc.style.backgroundColor=c2;
else if((c==ww && r<=hh)||(c<ww && r==hh)) cc.style.backgroundColor=c1;
}
}
}
}
</script>
<script type='text/javascript'>
function ripristina(ww,hh){
if(document.getElementById && document.getElementsByTagName){

var t=document.getElementById('tabella_incontri');
var rr=t.getElementsByTagName('tr');

var c1="colore_1"; //colore incontro
var c2="colore_2"; //colore squadre
var c3="colore_3"; //colore incrocio
var c4="colore_4"; //........

for(var r=0; r<=hh; r++){
for(var c=0; c<=ww; c++){
var cc=rr[r].getElementsByTagName('TD')[c];

if(c==0 && r==0) cc.style.backgroundColor=c4;
else if(c==r) cc.style.backgroundColor=c3;
else if((c==0 && r==hh)||(c==ww && r==0)) cc.style.backgroundColor=c2;
else if((c==ww && r<=hh)||(c<ww && r==hh)) cc.style.backgroundColor=c1;
}
}
}
}
</script>

con la funzione evidenzia coloro le celle e con la funzione ripristina rimetto i colori originali.....
....domani poi cerco di farlo con una sola funzione....ah!! dimenticavo li richiamo così:

<td width='25' height='15' class='table-8' style='background-color:#333333;' onMouseOver="evidenzia(0,1);" onMouseOut="ripristina(0,1);" id='cells_0_1'>[img]$PATH_IMAGE/shim.gif[/img]</td>

anche qui però devo eliminare forse l'id ad ogni tag TD......

comunque se serve a qualcun'altro eccolo pronto............... ciauzzzzzzzzzzzz :metallica