Clicco checkbox e si colora la riga di tabella

**ldetomi** · 10-01-2006, 02:12

Ciao, richiesta che so essere relativamente semplice.
se ho una tebella di questo tipo:

codice:

<TABLE>
  <TR>
    <TD><input type='checkbox'></TD><TD>pippo1</TD><TD>pluto1</TD>...
  </TR>
  <TR>
    <TD><input type='checkbox'></TD><TD>pippo2</TD><TD>pluto2</TD>...
  </TR>
  <TR>
    <TD><input type='checkbox'></TD><TD>pippo3</TD><TD>pluto3</TD>...
  </TR>
</TABLE>

Come faccio a fare in modo che se checko alcune righe esse si colorano, e se le de-checko si decolorano? Lo script può essere indipendente dal numero di colonne/righe della tabella?

N.B: possono essere selezionate anche più righe contemporaneamente.

**br1** · 10-01-2006, 10:00

codice:

  <TR>
    <TD><input type='checkbox' onclick="this.parentNode.parentNode.style.backgroundColor=(this.checked)?'red':'white';"></TD><TD>pippo1</TD><TD>pluto1</TD>...
  </TR>

Compatibilita' tutta da testare

ciao

**pietro09** · 10-01-2006, 11:04

Questo è un esercizietto, tanto per trarre profitto dallo script di Br1

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>

Funziona con IE e Firefox, non so con i browser più vecchi.
E' sempre una variazione su tema. In pratica centralizzi il codice sulla tabella. Lì imposti l'evento onclick.
Una volta intercettato l'evento, ti ricavi l'oggetto che lo ha scatenato e ti comporti di conseguenza.
Un possibile miglioramento, per esercizio, sarebbe quello di aggiungere righe, cancellare righe e modificare righe.

**ldetomi** · 10-01-2006, 14:10

Quest'ultimo funziona alla perfezione, grazie!

**Souldust2** · 28-08-2007, 20:58

Grazie BR1, uso il tuo con successo su Firefox.

Discussione: Clicco checkbox e si colora la riga di tabella

Strumenti discussione

Ricerca discussione

Visualizza

Clicco checkbox e si colora la riga di tabella

Permessi di invio