Rendere visibile cella adiacente a quella attiva

[ldetomi]

Ciao a tutti, ho inserito in una mia pagina il seguente sorgente preso proprio qui sul forum:

  
  <SCRIPT type="text/javascript">
    var ultima;
    function cambia(obj)
    {
      if(ultima)
      {
        ultima.style.backgroundColor="transparent";
        ultima=false;
      }
      ultima=obj;
      ultima.style.backgroundColor="brown";
    }
  </SCRIPT>
  ...
  <TD onclick="cambia(this)">

per colorare lo sfondo della cella in cui clicco.

Siccome la tabella è formata da 3 colonne, e il codice appena riportato è attivo solo sulle celle della seconda colonna, vorrei modificarlo per fare in modo che ogni volta che clicco sulla cella essa si colori come già avviene, e contemporaneamente la cella adiacente diventi visibile. Quindi avrei bisogno che il codice modificasse anche l'attributo

  STYLE="visibility:hidden;"

in

  STYLE="visibility:visible;"

Sapreste dirmi come fare? Vi ringrazio in anticipo

[ldetomi]

Dai ragazzi, nessuno sa rispondermi? Dovrebbe essere una cosa da poco.

[Xinod]

x es.

    function cambia(obj){
	var obj2=obj.parentNode.getElementsByTagName('TD')[2];
	if(obj.style.backgroundColor!="brown"){
		obj.style.backgroundColor="brown";
		obj2.style.visibility='hidden';
	}
	else {
		obj.style.backgroundColor="transparent";
		obj2.style.visibility='visible';
	}
    }

ciao

[ldetomi]

Bè a parte che questo script non fa proprio quello che fa quello che ho postato, infatti per decolorare una cella bisogna ri-cliccarci dentro, mentre io volevo che cliccando su ciascuna cella si colorasse quella e si decolorasse quella precedentemente attiva.

A parte questo, dicevo, come faccio cosa significa il [2] nella seconda riga e cosa devo inserire nella cella adiacente, quella che dovrebbe prendere la proprietà di obj2, per attivarla?

[Xinod]

[2] perche' hai detto di avere 3 celle
cosi' nella cella adiacente non devi inserire alcun identificativo

se vuoi rendere quel numero variabile e mantenere l' anonimato della cella successiva (personalmente preferisco lavorare cosi')
puoi x es. fare cosi'

  var ultima;
    function cambia(obj){
      if(ultima)
      {
        ultima.style.backgroundColor="transparent";
	var obj2=ultima;
	while((obj2=obj2.nextSibling)){if(obj2.nodeType!=3) break;}
        obj2.style.visibility='visible'
        ultima=false;
      }
      ultima=obj;
      ultima.style.backgroundColor="brown";
	var obj2=ultima;
	while((obj2=obj2.nextSibling)){if(obj2.nodeType!=3) break;}
        obj2.style.visibility='hidden'
    }

ciao

[ldetomi]

Ci siamo quasi, intanto ti ringrazio per quello che mi hai già dato. In realtà per ottenere l'effetto voluto ho invertio i valori "hidden" e "visible".

Ti chiedo le ultime due cose:
La prima, più semplice, come devo fare per fare in modo che cliccando in qualsiasi altro punto della pagina si decolorino tutte le celle. In pratica adesso una cella si decolora solo se clicco su un'altra che si colora al suo posto, ma quindi non ho modo di decolorarle tutte senza ricaricare la pagina.

Seconda più complessa. Lo script funziona perfettamente per tutte le righe di tabella (che hanno tutte la struttura delle prime due seguenti) tranne per le ultime 3 che hanno la struttura leggermtente diversa e sono quindi un caso particolare:

<TR>
  <TD>...</TD>
  <TD onclick='cambia(this)'>...</TD>
  <TD STYLE='visibility:hidden;'>...</TD>
</TR>
<TR>
  <TD>...</TD>
  <TD onclick='cambia(this)'>...</TD>
  <TD STYLE='visibility:hidden;'>...</TD>
</TR>

......

<TR>
  <TD>...</TD>
  <TD onclick='cambia(this)'>...</TD>
  <TD rowspan=3>...</TD>
</TR>
<TR>
  <TD>...</TD>
  <TD>...</TD>
</TR>
<TR>
  <TD>...</TD>
  <TD>...</TD>
</TR>

Vorrei fare in modo che indipendentemente da quale sia la cella su cui clicco (di questo ultimo gruppo di 3), venga sempre mostrato il contenuto della terza cella della prima riga di tale gruppo.

Mi sono spiegato da cani, ma sono fiducioso che capirai cosa intendo. Forse la soluzione migliore sarebbe quella, se e' possibile, di generalizzare lo script potendo inserire una sorta di "coordinate" per la cella che di volta in volta si vuole rendere visibile, no?

Ti ringrazio anticipatamente.

[Xinod]

ma, a parte l' eccezione delle ultime 3 righe,
sono sempre e solo 3 celle di cui la terza e' da mostrare/nascondere?

[ldetomi]

Esatto proprio così! sono più o meno in questa forma:

<TABLE>
  <TR>
    <TD>Cognome:</TD>
    <TD onclick=cambia(this)><input type='text'>
    <TD STYLE='visibility:hidden;'>Inserisci il cognome</TD>
  </TR>
  <TR>
    <TD>Nome:</TD>
    <TD onclick=cambia(this)><input type='text'>
    <TD STYLE='visibility:hidden;'>Inserisci il nome</TD>
  </TR>

  ...

[Xinod]

cosi' tiene conto dell' eccezione delle ultime 3 righe

var ultima=false;

function cambia(obj){
	var vis=(ultima)?'hidden':'visible';
	var col=(ultima)?'transparent':'brown';
	var rObj=(ultima)?ultima:obj;

	rObj.style.backgroundColor=col;

	var trObj=rObj.parentNode;
	if(trObj.getElementsByTagName('TD').length<3){
		while(trObj=trObj.previousSibling){
			if(trObj.nodeType!=3){
				if(trObj.getElementsByTagName('TD').length==3) break;
			}
		}		
	}
	trObj.getElementsByTagName('TD')[2].style.visibility=vis;

	if(ultima){
		ultima=false
		cambia(obj)
	}
	else ultima=obj;
}

da quanto ho capito pero' c'e' una pessima idea di base:
se vuoi far apparire quella descrizione al click sul campo tagli fuori tutti i movimenti nel form via tab;
dovresti gestire focus e blur sui campi e non onclick sulle celle,
non avresti il conseguente problema di "spegnere" cliccando altrove eventuali elementi "accesi", che non e', come pensi, di semplice soluzione...

ciao

[ldetomi]

Sì ti capisco, purtroppo ti sarai accorto che le mie conoscenze di javascript sono praticamente nulle. Finora sei stato comunque molto prezioso, e non oso chiederti quale sarebbe lo script con l'onfocus l'onblur, ma se ci riuscissi te ne sarei molto grato.