Tabelle che si accendono

**Peter_Pan** · 16-07-2004, 16:53

Salve ho una semplicissima tabella con 10 righe e una colonna, quando vado sopra le righe cambia il colore di fondo, ora vorrei fare che quando clicco su una riga, mi si colori di un colore diverso, se dopo clicco un'altra riga, la precedente torni com'era e quella appena cliccata cambi colore.
Spero di essere stato chiaro, vi posto il codice che ho fatto per il rollover delle righe:

codice:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<STYLE type=text/css>
/*Classi per rollOver delle celle*/
.testoAutoMenu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333366;
	TEXT-DECORATION: none;
	BACKGROUND-COLOR: #D6D5D5;
	CURSOR: Hand;
}
.testoAutoMenuR {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333366;
	BACKGROUND-COLOR: #CEE0E7;
	TEXT-DECORATION: none;
	CURSOR: Hand;
}
</style>
<script language=Javascript>
function accendi()	{
	alert('ok');
}
</script>
</HEAD>
<BODY>
<table width="100%" border="0" cellspacing="1" cellpadding="1">
	  <tr> 
	    <td height="22" 
	  	onmouseout="this.className='testoAutoMenu'" 
	  	onmouseover="this.className='testoAutoMenuR'" 
	  	onClick="accendi();"> 
	      [img]layout/segnalinoAero.gif[/img] 
	      <font color="#666666">Prima</font></td>
	  </tr>
	  <tr> 
	    <td height="22" 
	  	onmouseout="this.className='testoAutoMenu'" 
	  	onmouseover="this.className='testoAutoMenuR'"
	  	onClick="accendi();"> 
	      [img]layout/segnalinoAero.gif[/img] 
	      <font color="#666666">Secondo</font></td>
	  </tr>
	  <tr> 
	    <td height="22" 
	  	onmouseout="this.className='testoAutoMenu'" 
	  	onmouseover="this.className='testoAutoMenuR'"
	  	onClick="accendi();"> 
	      [img]layout/segnalinoAero.gif[/img] 
	      <font color="#666666">Terzo</font></td>
	  </tr>
</table>
</BODY>
</HTML>

**var** · 16-07-2004, 17:00

prova così:

codice:

function accendi(riga) {
 var righe=document.getElementsByTagName('td');
 for (var i=0; i<righe.length; i++)
  if (righe[i].id.indexOf('riga')!=-1) {
   if (righe[i].id==riga.id) righe[i].setAttribute('bgColor', '#FFFFFF');
   else righe[i].setAttribute('bgColor', '#CCCCCC');
  }
}

devi associare, però, a ogni riga della tua tabella un id di questo tipo:

codice:

<td id="riga01" onclick="accendi(this);" ...

ciao

**Peter_Pan** · 16-07-2004, 17:12

in verità non succede niente, perchè???? AIUTO

**var** · 16-07-2004, 17:17

Originariamente inviato da Peter_Pan
in verità non succede niente, perchè???? AIUTO

ecco un esempio completamente funzionante:

codice:

<html>
<head>
<title>Prova</title>


<script language="javascript">

function accendi(riga) {
 var righe=document.getElementsByTagName('td');
 for (var i=0; i<righe.length; i++)
  if (righe[i].id.indexOf('riga')!=-1) {
   if (righe[i].id==riga.id) righe[i].setAttribute('bgColor', '#FFFFFF');
   else righe[i].setAttribute('bgColor', '#CCCCCC');
  }
}

</script>

</head>
<body>
<table border="1">
<tr>
<td id="riga01" onclick="accendi(this);" bgcolor="#CCCCCC">Cella1</td>
</tr>
<tr>
<td id="riga02" onclick="accendi(this);" bgcolor="#CCCCCC">Cella2</td>
</tr>
<tr>
<td id="riga03" onclick="accendi(this);" bgcolor="#CCCCCC">Cella3</td>
</tr>
</table>
</body>
</html>

ciao

**Peter_Pan** · 16-07-2004, 17:35

Ok sono riuscito, solo che così mi o devo togliere il rollOver, oppure basta che mi sposto di riga e si deseleziona quella che avevo cliccato ti posto un esempio di quello che ho fatto io, ho leggermente modificato il codice JS per usare le classi e non il bgcolor:

codice:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<STYLE type=text/css>
/*Classi per rollOver delle celle*/
.testoAutoMenu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333366;
	TEXT-DECORATION: none;
	BACKGROUND-COLOR: #D6D5D5;
	CURSOR: Hand;
}
.testoAutoMenuR {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333366;
	BACKGROUND-COLOR: #CEE0E7;
	TEXT-DECORATION: none;
	CURSOR: Hand;
}
.terzo	{
	BACKGROUND-COLOR: #C20D0D;
}

</style>
<script language=Javascript>
function accendi(riga) {
 var righe=document.getElementsByTagName('td');
 for (var i=0; i<righe.length; i++)
  if (righe[i].id.indexOf('riga')!=-1) {
   if (righe[i].id==riga.id) righe[i].className='terzo';
   //if (righe[i].id==riga.id) righe[i].setAttribute('bgColor', '#FFFFFF');
   else righe[i].className='testoAutoMenu';
   //else righe[i].setAttribute('bgColor', '#CCCCCC');
  }
}


</script>
</HEAD>
<BODY>
	<table width="100%" border="0" cellspacing="1" cellpadding="1">
	  <tr> 
	    <td id="riga01" class="testoAutoMenu" height="22" 
	    onmouseout="this.className='testoAutoMenu'" 
		onmouseover="this.className='testoAutoMenuR'"
	    onclick="accendi(this);"> 
	      [img]layout/segnalinoAero.gif[/img] 
	      <font color="#666666">Primo</font></td>
	  </tr>
	  <tr> 
	    <td id="riga02" class="testoAutoMenu" height="22" 
	    onmouseout="this.className='testoAutoMenu'" 
		onmouseover="this.className='testoAutoMenuR'"
	    onclick="accendi(this);"> 
	      [img]layout/segnalinoAero.gif[/img] 
	      <font color="#666666">Secondo</font></td>
	  </tr>
	  <tr> 
	    <td id="riga03" class="testoAutoMenu" height="22" 
	    onmouseout="this.className='testoAutoMenu'" 
		onmouseover="this.className='testoAutoMenuR'"
	    onclick="accendi(this);"> 
	      [img]layout/segnalinoAero.gif[/img] 
	      <font color="#666666">Terzo</font></td>
	  </tr>
	  
	</table>

</BODY>
</HTML>

**standard** · 16-07-2004, 17:42

http://digilander.libero.it/wstandar...rClickTab.html
http://digilander.libero.it/wstandar...ickTabext.html

**Peter_Pan** · 16-07-2004, 17:51

Grazie proprio quello che cercavo, ora provo a capirci qualche cosa..

**standard** · 16-07-2004, 17:53

Originariamente inviato da Peter_Pan
Grazie proprio quello che cercavo, ora provo a capirci qualche cosa..

a riguardo avevo scritto un articolo:
http://pro.html.it/articoli/id_273/i...pag_3/pag.html
(ma ora pro.html.it non funzia)...cmq era una mia vecchia pillola:
http://forum.html.it/forum/showthrea...hreadid=386312

ciauz

**Peter_Pan** · 20-07-2004, 15:51

Ok mi funziona tutto bene, una sola cosa, c'è un modo quando carico la pagina per dare come selezionato (cliccato) la prima riga della tabella?
Tipo nell'onLoad mettere riga1 cliccata??

**Peter_Pan** · 21-07-2004, 09:21

up...
standard mi puoi aiutare a risolvere questo problemino??

Discussione: Tabelle che si accendono

Strumenti discussione

Ricerca discussione

Visualizza

Tabelle che si accendono

Permessi di invio