funzioni ricorsive in javascript

**pietro09** · 12-09-2005, 16:00

ho un <img molto annidato in una tabella

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>a</title>
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
		<meta name="ProgId" content="VisualStudio.HTML">
		<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<script language="javascript">
<!--
function controllo(v)
{
	//alert(v.parentNode.parentNode.parentNode.parentNode.tagName);
	var x = prova(v);
	alert(x);
	
}

function prova(v)
{
	
	if(v.parentNode.tagName == "TR")
		return v.parentNode;
	else
		prova(v.parentNode);
}

//-->
</script>

	</head>
	<body MS_POSITIONING="FlowLayout">
		<table>
			<tr>
				<td>
					<div>
						<span><img onclick="controllo(this);"></span>
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>

Ho provato a trovarmi, bypassando l'istruzione diretta, v.parentNode.parentNode.parentNode.parentNode
la riga che contiene l'immagine con una funzione ricorsiva
La funzione ritorna sempre undefined. Usando il debug con IE ed eseguendo passo-passo, arrivo correttamente alla istruzione return v.parentNode;

se provo a chiedere il tagName da correttamente TR. Una volta usciti dalla funzione si perde il riferimento alla riga.

La mia è una curiosità

Sapete darmi qualche spiegazione?

**br1** · 12-09-2005, 16:19

La logica delle tue funzioni non l'ho capita... :master: in pratica vuoi il riferimento al nodo superiore al TR ?

codice:

function controllo(v)
{
	//alert(v.parentNode.parentNode.parentNode.parentNode.tagName);
	var x = prova(v);
	alert(x.tagName);
	
}

function prova(v)
{//debugger
	
	if(v.tagName == "TR")
		return v.parentNode;
	return prova(v.parentNode);
}

ciao

**pietro09** · 12-09-2005, 19:53

Lo scopo della domanda era cercare di capire una volte per tutte la ricorsione in Javascript.

Lo spunto (a parte la sua scarsa utilità) è questa:
dato un tag annidato dentro una tabella, trovare la riga che lo contiene.
E' chiaro che si trova con:

v.parentNode.parentNode.parentNode.parentNode... con parentNode, tante volte dipendente dal grado di annidamento.

Adesso, la funzione che ho fatto, funziona benissimo se utilizzo una variabile esterna alla funzione, mentre, come l'ho fatta io non funge; forse perchè i parametri vengono passati per valore e non per riferimento.
La cosa strana è che, dentro la funzione, tutto sembra funzionare. Infatti, se intercetto v.parentNode.tagName e lo accodo ad un TextArea, vedo che la funzione stampa ricorsivamente i tag genitore.

Arrivato all'ultimo, return v.parentNode, col debugger scopro che effettivamente questo v.parentNode è di tipo TR. Però, quando esco dalla funzione perdo il riferimento, che è sempre e comunque undefined

Ciao

**badaze** · 12-09-2005, 20:27

Prova cosi

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>a</title>
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
		<meta name="ProgId" content="VisualStudio.HTML">
		<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
<script language="javascript">
<!--
function controllo(v)
{
	//alert(v.parentNode.parentNode.parentNode.parentNode.tagName);
	var x = prova(v);
	alert(x.tagName);
	
}

function prova(v)
{
	
	if(v.parentNode.tagName == "TR")
		return v.parentNode;
	else
		return prova(v.parentNode);
}

//-->
</script>

	</head>
	<body MS_POSITIONING="FlowLayout">
		<table>
			<tr>
				<td>
					<div>
						<span><img onclick="controllo(this);"></span>
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>

**pietro09** · 12-09-2005, 20:56

Ti ringrazio, adesso ho capito

Un possibile impiego l'ho già trovato. Lavorando con asp.net, per selezionare una riga di una tabella, si suggerisce senza mezzi termini, di rimandare la pagina al server

Io, da ignorante preferisco fare così:

codice:

<html>
	<head>
		<title>a</title>
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
		<meta name="ProgId" content="VisualStudio.HTML">
		<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
		<LINK href="../Styles.css" type=text/css rel=stylesheet >
	
<script language="javascript">
<!--

var tr_old = null;
function seleziona(v)
{
	//document.getElementById("Textarea1").value = "";
	var tr = getParentElement(v, "TR");
	
	//alert(tr.tagName);
	if(tr_old != null) 
	{
		tr_old.style.backgroundColor = "White";
		tr_old.style.color = "#330099";
		tr_old.style.fontWeight = "normal";
		
	}
	tr_old = tr;
	
	tr.style.backgroundColor = "#FFCC66";
	tr.style.color = "663399";
	tr.style.fontWeight = "bold";
}

function getParentElement(v, tag)
{
	var w = v.parentNode;
	if(w.tagName)
	{
		//document.getElementById("Textarea1").value += w.tagName + "\n";
		if( v.parentNode.tagName.toUpperCase( ) == tag.toUpperCase( ) )
			return v.parentNode;
		else
			return getParentElement(v.parentNode, tag);
	
	}
	else return v;
	
}

//-->
</script>


	</head>
	<body MS_POSITIONING="FlowLayout">
		<table border="1">
			<tr>
				<td>
					<div>
						<span><img onclick="seleziona(this);">prova</span>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div>
						<span><img onclick="seleziona(this);">prova</span>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div>
						<span><img onclick="seleziona(this);">prova</span>
					</div>
				</td>
			</tr>
			
		</table>
		<TEXTAREA rows='20' cols='40' ID="Textarea1" NAME="Textarea1"></TEXTAREA>
	</body>
</html>

Per essere ancora più chiari e realistici, un caso è quello di avere una tabella con un campo note. Al posto di riempire il campo, in genere un campo memo di 60.000 caratteri, metto una immaginetta del tipo "vedi note" che, con una funzione javascript, seleziona la riga, fa una richiesta ajax al server e restituisce infine in un div mobile, le sue belle note.

Quella ricorsione non mi veniva proprio :master: ma adesso è tutto più chiaro. Ciao

Discussione: funzioni ricorsive in javascript

Strumenti discussione

Ricerca discussione

Visualizza

funzioni ricorsive in javascript

Permessi di invio