ottenere e ciclare un array con getElementById()

**dottwatson** · 10-05-2007, 19:53

ciaoa tutti e, in primis, mi scuso per l'ignoranza ma ce la sto mettendo tutta in javascript....

mi trovo in una situazione in cui devo verificare l' id di diverse tabelle e,div e celle, perchè in base a quello, viene calcolata l'immagine da inserire nella tabella,div o cella a cui fa riferimento l'id.
successivamente, verifico con js le reali dimensioni della tabella,div o cella, chiamo una classe php che mi genera un immagine da utilizzare come background, e modifico lo style dell atabella in modo da utilizzare nel sito UNA immagine come sorgente ma sempre resizata per la tabella,cella o div che dovrà ospitarla... l'idea è buona e fattibile, se non per un piccolo problema legato appunto a js e che non riesco a gestire, nonostante io programmi in php....

vi posto il codice....

codice:

<html>
<head>
<?
include("php_class/img2thumb.class.php");
?>
<script language="javascript">
// questo forse è la funzione che da problemi e  che deve generare l' array degli id 
function ArrayId(sId)
  {
  var outArray = new Array();	
	if(typeof(sId)!='string' || !sId)
    {
		return outArray;
    };
	
	if(document.evaluate)
    {
		var xpathString = "//*[@id='" + sId.toString() + "']"
		var xpathResult = document.evaluate(xpathString, document, null, 0, null);
		while ((outArray[outArray.length] = xpathResult.iterateNext())) 
      { 
      }
		outArray.pop();
    }
  else if(document.all)
    {		
		for(var i=0,j=document.all[sId].length;i<j;i+=1)
      {
		  outArray[i] =  document.all[sId][i];
      }
    }
  else if(document.getElementsByTagName)
    {
		var aEl = document.getElementsByTagName( '*' );	
		for(var i=0,j=aEl.length;i<j;i+=1)
      {
			if(aEl[i].id == sId )
        {
				outArray.push(aEl[i]);
        };
      };	
    };
	return outArray;
  }

//questa funziona
function getWidth(id)
{
    x = document.getElementById(id);
    return x.offsetWidth;
}
//questa funziona
function getHeight(id)
{
    y = document.getElementById(id);
    return y.offsetHeight;
}

//questa funziona finche deve gestire un dato e non array,così modificata non funge
function bgtab(id)
  {
  table=ArrayId(id);
  for (a=0;a<table.lenght;a++)
    {
    table[a].style.backgroundImage="url(background.php?filename="+id+".png&newxsize="+getWidth(id)+"&newysize="+getHeight(id)+"&bgred=173&bggreen=223&bgblue=156)";
    alert(table[a]+"  "+id);
    alert('larghezza tabella è ' + getWidth(id)+ ' pixel');
    alert('altezza tabella è ' + getHeight(id)+ ' pixel');
    }
  }
</script>
</head>
<body onload="javascript:bgtab('intestazione');bgtab('corpo');">
<table id="test"  border="0" width="350"  >
<tr>
<td id="intestazione" align="center">intestazione</td>
</tr>
<tr >
<td id="corpo">
ble bla bla
</td >
</tr>
<tr>
<td id="intestazione">ciao mondo</td>
</tr>
</table>
</body>
</html>

brobabilmente mi sto compluicando la vita e forse il mio codice,previ errori sarà anche strutturato male... mi affido a voi, la spada di damocle pende sul mio capo

**dottwatson** · 11-05-2007, 00:36

in pratica mi serve solo sapere come ottenere un array degli id e processarli uno per uno

**unbreakable9** · 11-05-2007, 02:54

Ciao

da una prima occhiata ho visto che hai dato lo stesso id ("intestazione") a due td. Non so se questo è il reale problema ma comincerei correggere quello magari sostituendo id con class e mettendo className nei riferimenti.

Iin secondo luogo nella funzione che genera l'array il ciclo for credo sia errato poichè hai messo 4 statement quindi ti consiglio di dichiarare/inizializzare la variabile j fuori e porre solo solo for(i=0;i<j;i++)

Cmq sempre riguardo questa funzione, direi che è decisamente poco performante in quanto deve scorrere tutto il documento solo per 3 riferimenti.
Se la tabella ha id "test" e la struttura è quella perchè non fai riferimento cosi:

var righe=document.getElementById("test").getElementsB yTagName("tr")
//array delle righe

righe.firstChild
//se c'è una sola td

righe.childNodes
//se ci sono più td

**dottwatson** · 11-05-2007, 09:20

ciao, innanzitutto grazie per la risposta

ho provato a fare come dici te ma , anche se non mi trovo errori in consolle, il ciclo non viene rispettato, se non eseguito.

il codice è questo qui

codice:

<html>
<head>
<?
include("php_class/img2thumb.class.php");
?>
<script language="javascript">



function getWidth(id)
{
    x = document.getElementById(id);
    return x.offsetWidth;
}
function getHeight(id)
{
    y = document.getElementById(id);
    return y.offsetHeight;
}

function bgtab(id)
  {
  var table=document.getElementById(id).getElementsByTagName("td");
  for (a=0;a<table.lenght;a++)
    {

    table[a].style.backgroundImage="url(background.php?filename="+id+".png&newxsize="+getWidth(id)+"&newysize="+getHeight(id)+"&bgred=173&bggreen=223&bgblue=156)";
    alert(table[a]+"  "+id);
    alert('larghezza tabella è ' + getWidth(id)+ ' pixel');
    alert('altezza tabella è ' + getHeight(id)+ ' pixel');
    //document.write(img);
    }
  }
</script>
</head>
<body onload="javascript:bgtab('intestazione');bgtab('corpo');">
<table id="test"  border="0" width="350"  >
<tr>
<td id="intestazione" align="center">ciao mondo</td>
</tr>
<tr >
<td id="corpo">
ble bla bla
</td >
</tr>
<tr>
<td id="intestazione">ciao mondo</td>
</tr>
</table>
</body>
</html>

a dire il vero vorrei evitare di fare un getElementsBYTagName perchè non so mai dove si troverà questo benedetto id , quante tabelle e quante celle in quanto il codice html è generato da svariate funzioni php. la replicazione degli id non è un errore, mi serve proprio così per es.: id='intestazione' => carica in quella cella intestazione.png ecc...

nel ciclo for sono presenti degli alert, che non vengono dati...

**dottwatson** · 11-05-2007, 10:58

sono accettate anche soluzioni alternative....

**dottwatson** · 11-05-2007, 11:02

Originariamente inviato da unbreakable9
Ciao

da una prima occhiata ho visto che hai dato lo stesso id ("intestazione") a due td. Non so se questo è il reale problema ma comincerei correggere quello magari sostituendo id con class e mettendo className nei riferimenti.

Iin secondo luogo nella funzione che genera l'array il ciclo for credo sia errato poichè hai messo 4 statement quindi ti consiglio di dichiarare/inizializzare la variabile j fuori e porre solo solo for(i=0;i<j;i++)

Cmq sempre riguardo questa funzione, direi che è decisamente poco performante in quanto deve scorrere tutto il documento solo per 3 riferimenti.
Se la tabella ha id "test" e la struttura è quella perchè non fai riferimento cosi:

var righe=document.getElementById("test").getElementsB yTagName("tr")
//array delle righe

righe.firstChild
//se c'è una sola td

righe.childNodes
//se ci sono più td

potresti farmi un esempio pratico della sua applicazione per favore?

**unbreakable9** · 11-05-2007, 20:30

Usare lo stesso id per elementi distinti nel codice html è un errore e anche abbastanza grave in quanto compromette la corretta gestione dell'albero del dom e i relativi riferimenti.
Quindi se a te serve un segnaposto comune per diversi oggetti allora usa class oppure usa id diversi e ti studi un algoritmo per ricavare da questi id dei riferimenti su cui poter applicare le tue regole.

andiamo poi all'ultima parte del codice :

codice:

function bgtab(id)
  {
  vare righe=getElementById(id).getElementsByTagName("tr"); //array di righe
  var colonna; //conterrà l'elemento td della riga corrente
  for (var a=0;a<righe.lenght;a++)
    {
colonna=righe[a].firstChild;    
colonna.style.backgroundImage="url(background.php?filename="+colonna.className+".png&newxsize="+colonna.offsetWidth+"&newysize="+colonna.offsetHeight+"&bgred=173&bggreen=223&bgblue=156)";
    alert('larghezza tabella è ' + getWidth(id)+ ' pixel');
    alert('altezza tabella è ' + getHeight(id)+ ' pixel');
    }
  }
</script>
</head>
<body onload="bgtab('test');">
<table id="test"  border="0" width="350"  >
<tr>
<td class="intestazione" id=" align="center">intestazione</td>
</tr>
<tr >
<td class="corpo">
ble bla bla
</td >
</tr>
<tr>
<td class="intestazione">ciao mondo</td>
</tr>
</table>
</body>
</html>

Questa è una possibile soluzione: la funzione bgtab('test') crea un array (var righe) formato dalle righe (tr) della tabella di id 'test'.
Siccome nel tuo html c'è solo un td per ogni tr allora creiamo una variabile di nome colonna che conterra appunto tale elemento td.
Questo viene caricato all'inizio del ciclo for con l'istruzione colonna=righe[a].firstChild e processato nel ciclo for per ricavare nell'url i dati className (ovvero il contenuto dell'attributo class) offsetWidth e offsetHeight della cella corrente.
A tale proposito sei sicuro che quell'url funziona? cioè sinceramente non so se è possibile questo tipo di indirizzamento (link dinamico) perchè a quanto ne so in url relativamente alla proprietà background ci deve essere il link a una risorsa statico. ( in tal caso dovresti crearti una classe con ajax che recupera l'url corretto a seconda dei dati javascript).

Discussione: ottenere e ciclare un array con getElementById()

Strumenti discussione

Ricerca discussione

Visualizza

ottenere e ciclare un array con getElementById()

Permessi di invio