JS: usare i nodi per leggere una tabella

**ivy_76** · 05-09-2007, 11:51

Ciao a tutti !

mi sto perdendo nel cercare di capire come leggere i figli di una tabella.

<table name='ivano' id='ivano' border='1' align='center'>
<tr><td>prodotto1 </td><td>prezzo 1 </td></tr>
<tr><td>prodotti2</td><td>prezzo2</td></tr>
</table>

Poi chiamo una funzione (onLoad della pagina) che dovrebbe visualizzare tutte le righe.

Sto facendo una cosa alla volta. Vorrei vedere almeno il primo nodo

n = document.getElementById('ivano').node.childNodes[1];

ma non ci riesco. Facendo cosi ottengo un errore. Dove sbaglio ?

**ivy_76** · 07-09-2007, 12:09

Sto facendo qualche passo avanti ma ho un mucchio di difficoltà. Ora riesco a prendere il numero di righe e di colonne presenti nella tabella.
Quello che vorrei fare ora è visualizzare ogni cella della riga tramite un ciclo.

Vi allego il codice. Anziché vedere le singole celle, javascript mi dice "undefined"

--------------

<script language='javascript'>

function numRighe()
{
righe = (document.getElementById('livello2').getElementsBy TagName('TR').length);

colonne = (document.getElementById('livello2').getElementsBy TagName('TD').length);

// alert(righe);

// alert(colonne);

for (var i = 0 ; i<= righe; i++ )
{
valore = document.getElementById('livello2').getElementsByT agName('TD').value
document.write(valore)
document.write("
");
}

}
</script>

<form action="2.htm" name='azione' methog='post'>
<input type="button" value="Numero di celle nel livello2" onclick="numRighe()" />

<div ID="livello2" style="background:red;width:200px;">
<table border=1 width="200px">
<tr><td>prima colonna</td><td>seconda colonna</td></tr>
<tr><td>ter colonna</td><td>qua colonna</td></tr>
</table>
</div>
</form>

**pietro09** · 07-09-2007, 12:33

vedi se ti può servire

codice:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>
<!--

function button1_onclick() {
	/*
	var tabella = document.getElementById("Tabella1");
	if(!tabella) return;
	var i, j;
	
	
	
	var tabella_n = tabella.childNodes.length;
	
	for(i = 0; i < tabella_n; i++) 
		if(tabella.childNodes[i].tagName != undefined)
			alert(tabella.childNodes[i].tagName);
	
	
	var tb = tabella.getElementsByTagName("TBODY")[0];
	var r = -1, c = -1;
	for(i = 0; i < tb.childNodes.length; i++) 
		if(tb.childNodes[i].tagName != undefined)
		{	
			//alert(tb.childNodes[i].tagName);
			r++; c = -1;
			for (j = 0; j < tb.childNodes[i].childNodes.length; j++)
			{
				if(tb.childNodes[i].childNodes[j].tagName != undefined)
				{	
					c++;
					alert(r + ", " + c + ": " + tb.childNodes[i].childNodes[j].innerHTML);
				}
			}
	
		}
	
	
	
	
	return;
	*/
	
	var tb = document.getElementById("Tabella1");
	if(!tb) return;
	var i, j;
	
	var righe = tb.getElementsByTagName("TR");
	for(i = 0; i < righe.length; i++) 
	{
		var colonneTD = righe[i].getElementsByTagName("TD");
		for(j = 0; j < colonneTD.length; j++) 
			alert(i + ", " + j + ": " + colonneTD[j].innerHTML);
		
		var colonneTH = righe[i].getElementsByTagName("TH");
		for(j = 0; j < colonneTH.length; j++) 
			alert(i + ", " + j + ": " + colonneTH[j].innerHTML);

	}

}

//-->
</SCRIPT>
</HEAD>
<BODY>

<table border="1" id="Tabella1" cellpadding="2" cellspacing="0">
	<tr>
		<th width="30" height="30">a1</th>
		<th width="30" height="30">b1</th>
		<th width="30" height="30">c1</th>
		<th width="30" height="30">d1</th>
	</tr>
	<tr>
		<td width="30" height="30">a2</td>
		<td width="30" height="30">b2</td>
		<td width="30" height="30">c2</td>
		<td width="30" height="30">d2</td>
	</tr>
	<tr>
		<td width="30" height="30">a3</td>
		<td width="30" height="30">b3</td>
		<td width="30" height="30">c3</td>
		<td width="30" height="30">d3</td>
	</tr>
	<tr>
		<td width="30" height="30">a4</td>
		<td width="30" height="30">b4</td>
		<td width="30" height="30">c4</td>
		<td width="30" height="30">d4</td>
	</tr>
</table>



<INPUT type="button" value="Button" id=button1 name=button1 LANGUAGE=javascript onclick="return button1_onclick()">
</BODY>
</HTML>

**ivy_76** · 07-09-2007, 12:57

ottimo ! Direi che va alla grande. Provo a personalizzarlo

Grazie 1000

**pietro09** · 07-09-2007, 13:04

guarda se ti serve anche questo; certe cose si possono fare in più modi

codice:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<script>
function table1_onclick(e)
{
	//accedo all'oggetto event
	if(!e) var e = window.event;	
	
	//accedo all'elemento che scatena l'evento
	var target = (e.target)?e.target:e.srcElement;

	//solo per l'elemento TD recupero quello che c'è dentro
	if(target.tagName.toUpperCase() == "TD") 
	{	
		//recupero la riga
		var riga = target.parentNode;
		
		//recupero l'indice della riga
		var indiceriga = riga.rowIndex;
		
		//recupero l'indice della colonna
		var indicecolonna = target.cellIndex;
		
		//ignoro la riga di intestazione e la prima colonna
		//e trovo il contenuto della cella
		if(indiceriga > 0 && indicecolonna > 0) alert(target.innerHTML	);
	}
	else
	{
		//trovo i checkbox
		if(target.type == "checkbox")
		{
			//ricavo la riga
			var riga = target.parentNode.parentNode;
			
			//cambio il colore di sfondo della riga
			riga.style.backgroundColor = (target.checked)?"red":"white";
		}
	}	
	
}

</script>
</HEAD>
<BODY>
<h3>Clicca sulle celle della tabella, con IE o Firefox, e recupera

l'oggetto che ha scatenato l'evento
</h3>
<table id="table1" border="1" onclick="table1_onclick(event);">
	<tr><td>colonna0<td>colonna1</td><td>colonna2</td></tr>
	<tr><td><INPUT type="checkbox" name=checkbox1></td><td>a00</td><td>a01</td></tr>
	<tr><td><INPUT type="checkbox" name=checkbox1><td>a10</td><td>a11</td></tr>
	<tr><td><INPUT type="checkbox" name=checkbox1><td>a20</td><td>a21</td></tr>
</table>

</BODY>
</HTML>

Discussione: JS: usare i nodi per leggere una tabella

Strumenti discussione

Ricerca discussione

Visualizza

JS: usare i nodi per leggere una tabella

Permessi di invio