Newsgroup: it.comp.lang.javascript
Titolo: Navigazione del DOM

Salve,
questa volta sono un po' OT, ma avrei bisogno di un consiglio.
Ho una struttura cosi`:
<table id="tabella">
 <tr>
  <td><a href="" onclick="seleziona(this)"><img src="immagine1"></a></td>
  <td><img src="immagine1_desc"></td>
  <td><a href="" onclick="seleziona(this)"><img src="immagine2"></a></td>
  <td><img src="immagine2_desc"></td>
 </tr>
 <tr>
  ...
 </tr>
</table>
Ho abbreviato lasciando solo le cose importanti. La tabella ha 6 righe
uguali (per ora).
Quando l'utente clicka sull'icona nella prima colonna (immagine1), la
funzione seleziona() deve cambiare l'immagine della seconda colonna
(immagine1_desc), ma rimettendo tutte le immagini secondarie (quelle con
"_desc").
Io ho provato cosi`:
function seleziona(active)
{
  actimg = active.parentNode.nextSibling.firstChild;
  atcimg.src=...;
}
Ma non funziona, perche` il nextSibling e` un campo di testo (l'a-capo e
il tab).
Mi conviene mettere un class sulle immagini da modificare in modo da
trovarle facendo un parsing di
document.getElementById("tabella").getElementsByTagName("img") e cercando
quelli con la class o c'e` un metodo meno barbaro?
La tabella non dovrebbe crescere quasi per niente, quindi non solo le
prestazioni il problema, ma proprio trovare un metodo elegante per farlo.
Inoltre ho comunque il problema di riattivare l'immagine selezionata, che
pensavo di risolvere mettendo un id al tag a (o all'img contenuta, che
poi c'e` gia` perche` mi serve ad impostare un campo hidden di un form) e
uno simile all'img da modificare.
Anche qui cercavo metodi eleganti per risolverlo.
Grazie.

 }
usa questo:
actimg = active.parentNode.nextSibling.nextSibling.firstChild;
vedrai che funziona
Ciao
Oreste

 vedrai che funziona
L'avevo provato. :)
Ma e` un terno al lotto. Se per caso c'e` qualcosa in mezzo ti frega.
Ci vorrebbe qualcosa tipo active.parentNode.nextElement (che prenda
solo gli elementi "tag") oppure active.parentNode.nextTD. Qualcosa che mi
trovi il fratello gemello (stesso tag) invece del vicino, ma so gia` che
non esiste nello standard. :/
Grazie comunque.
Bye.

 Ma e` un terno al lotto. Se per caso c'e` qualcosa in mezzo ti frega.
Ti pongo il quesito perchè cerco di capire il problema fino in fondo.
Le due celle sono sempre contigue? Ci può essere un'altro elemento fra
le due celle?




E` proprio quello il problema... :)
Il codice mi arriva dagli HTML-isti. So solo che in un td c'e`
l'immagine-bottone e nel successivo l'immagine da modificare.
Potrebbero metterci un <br> o un &nbsp; a caso.
Bye.

 "_desc").
Considera che è qualche giorno che sono fuori fase. Puoi spiegarmi
meglio cosa intendi? Così magari riesco a darti una mano.
-- 
~ La realtà è un'illusione causata dall'assenza di alcool.



non so se ho capito bene, ma una cosa simil questa potrebbe funzionare?
function seleziona(active)
{
  table = document.getElementById("tabella");
  cells = table.getElementsByTagName("td");
  father = active.parentNode;
  for (var i = 0; i < cells.lenght; i++) {
    if (cells[i] == father)
      cells[i+1].getElementsByTagName("img")[0].src=....;
    else
      cells[i+1].getElementsByTagName("img")[0].src=....;
  }
}
non l'ho provata e sicuramente c'ho scritto qualche cavolata :-D

 Potrebbero metterci un <br> o un &nbsp; a caso.
finalmente hai svelato l'arcano
purtroppo mi manca il tempo, ma se sviluppi bene il codice seguente
secondo me trovi la soluzione, nota che non è molto elegante è solo
una traccia:
function seleziona(active) {
var prossimo = '';
var dentro = '.firstChild';
var actimg;
var i = 0;
var j = 0;
while(i<6){
eval('actimg = active.parentNode'+prossimo);
if (actimg = '[HTMLTableCellElement]') {
alert('actimg è [HTMLTableCellElement]');
while(j<5){
eval('actimg = active.parentNode'+prossimo+dentro);
alert('actimg = '+actimg);
dentro += '.firstChild';
if (actimg = '[object HTMLImageElement]') {
alert('fine programma\nactimg = '+actimg+'\nactimg.src = '+actimg.src
+'\ni = '+i);
return;
}
}
}
prossimo += '.nextSibling';
i++;
}
}

 il tab).
Prova con qualcosa di simile:
function findSibling(ob, tag){
 ob=ob.nextSibling;
 while((ob!=null)&&(ob.nodeName!=tag)){
	ob=ob.nextSibling;
 }
 return ob;
}
function seleziona(ob){
 // cerca il prossimo TD
 var td=findSibling(ob.parentNode,"TD");
 var img=null;
 if(td){
	if(td.firstChild.nodeName=="IMG"){
		// trovata immagine nel primo child
		img=td.firstChild;
	} else {
		// cerca nei seguenti
		img=findSibling(td.firstChild,"IMG");
	}
 }
 if(img){
	...
 }
}
Provato solo su Mozilla suite.
'bye

   for (var i = 0; i < cells.lenght; i++) {
for (var i = 0; i < cells.lenght; i+2) {

 meglio cosa intendi? Così magari riesco a darti una mano.
In pratica il tutto serve a simulare un <input type="radio">, ma i
pulsanti devono essere grafici, e il feedback deve avvenire su un'immagine
diversa.
Nella tabella, la prima e terza colonna contengono le immagini clickabili,
e la seconda e quarta le immagini che danno il feedback.
Siccome solo una opzione deve essere selezionata, quando una diventa
"attiva" tutte le altre devono tornare allo stato di disattive.
Visto che il tutto doveva assolutamente essere pronto per ieri ho risolto
con gli id e le regexp, ma mi tengo buoni i vostri suggerimenti per il
futuro.
Grazie mille a tutti!
Bye.

 con gli id e le regexp,
Dato che deve esserci un solo elemento "selezionato" alla volta, si
può usare una cosa del genere: 
	var prev = null;
	function seleziona( sender ){
		var 	td 	= sender.parentNode;
		if ( prev!= null )
			prev.src = "nochecked.png";
 
		td = td.parentNode.cells[td.cellIndex+1];
		prev = td.getElementsByTagName("img")[0];
		prev.src = "...";
	}
Così facendo, "prev" ha sempre il riferimento all'elemento corrente
che è stato selezionato. Con del codice HTML diverso, sarebbe stato
possibile usare una tecnica molto più elegante, senza usare cicli o
variabili globali.
Per limitare i danni "stilistici" dovuti all'uso delle variabili di
tipo globale, potresti incapsulare il tutto in un oggetto, qualcosa
che ti faccia da widget, per intenderci.
-- 
~ Una volta, qui, era tutto <TABLE>.

 per non rischiare (con IE6, spesso) io userei "IMG" in maiuscolo.
Vai tranquillo non rischi. Non c'è alcun problema, neppure con IE6.
Se avessi usato la proprietà tagName di un nodo, avrei messo il tag
maiuscolo. Ma con il getElementsByTagName() è a tua discrezione.
-- 
~ Se potete leggere questo, la mia donna è caduta.
(Letta sul retro di una maglietta di un motociclista)

 anche con Safari? (uno che dava problemi me lo ricordo di sicuro, eh)
IMVHO ti stai confondendo con il tagName/nodeName. Anche con Safari
non dovresti avere questo genere di problema.
http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DOM.html
-- 
~ Tutti quelli che credono nella psicocinesi,
per favore alzino la mia mano.