JS cambio colore cella

**uboz** · 08-04-2005, 15:32

E' possibile cambiare il colore di una riga della tabella quando il mouse è su di essa?

grazie

**badaze** · 08-04-2005, 15:38

Prova questo. E' possibile anche cliccare sulle righe.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.normal1 {font-family:tahoma;font-size:8pt;background-color:yellow}
.normal2 {font-family:tahoma;font-size:8pt;background-color:white}
.overTR  {font-family:tahoma;font-size:8pt;background-color:blue;color:white}
.clicked {font-family:tahoma;font-size:8pt;background-color:red;color:white}
-->
</style>

<script language="JavaScript" type="text/javascript">
var savClass  = "";
var savClass2 = "";
var lastTR    = null;
<!--
function rOver(aTR) {
 savClass      = aTR.className;
 aTR.className = "overTR";
} // function rOver(aTR)

function rOut(aTR) {
 if (aTR.className == "clicked") return;
 aTR.className = savClass;
} // rOut(aTR)

function rEvidenzia(tr) {
 for (i = 0; i < tr.cells.length; i++) {
	var tdata = tr.cells(i);
  if (tdata.style.sav_backgroundColor == null) {
   tdata.style.sav_backgroundColor = tdata.style.backgroundColor;
   tdata.style.sav_color           = tdata.style.color;	 
   tdata.style.backgroundColor     = 'green';
   tdata.style.color               = 'white';	 
  } else {
   tdata.style.backgroundColor     = tdata.style.sav_backgroundColor;
   tdata.style.color               = tdata.style.sav_color;	 	 
   tdata.style.sav_backgroundColor = null;  
	 tdata.style.sav_color           = null;
  } // if (tdata.style.sav_backgroundColor == null)
 } // for (i = 0; i < tr.cells.length; i++)
} // function rEvidenzia(tr)

//-->
</script>


</head>
<body>
<table summary="" cellpadding="0" >
<tr  class="normal1" onmouseover="rOver(this);" onmouseout="rOut(this);" onclick="rEvidenzia(this);">
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr  class="normal2" onmouseover="rOver(this);" onmouseout="rOut(this);" onclick="rEvidenzia(this);">
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr  class="normal1" onmouseover="rOver(this);" onmouseout="rOut(this);" onclick="rEvidenzia(this);">
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr  class="normal2" onmouseover="rOver(this);" onmouseout="rOut(this);" onclick="rEvidenzia(this);">
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
</tr>
</table>
</body>
</html>

**uboz** · 08-04-2005, 15:54

Grazie mille!

**badaze** · 14-04-2005, 17:21

Una versione cross-browser...

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.normal1 {font-family:tahoma;font-size:8pt;background-color:yellow}
.normal2 {font-family:tahoma;font-size:8pt;background-color:white}
.overTR  {font-family:tahoma;font-size:8pt;background-color:blue;color:white}
.clicked {font-family:tahoma;font-size:8pt;background-color:red;color:white}
-->
</style>

<script language="JavaScript" type="text/javascript">
var savClass  = "";
var savClass2 = "";
var lastTR    = null;
var trBG      = new Array();
var trCO      = new Array();
<!--
function rOver(aTR) {
savClass      = aTR.className;
aTR.className = "overTR";
} // function rOver(aTR)

function rOut(aTR) {
if (aTR.className == "clicked") return;
aTR.className = savClass;
} // rOut(aTR)

function rEvidenzia(tr, riga) {
 if (trBG[riga] == null) {
  trBG[riga]                   = tr.style.backgroundColor;
  trCO[riga]                   = tr.style.color;  
  tr.style.backgroundColor     = 'green';
  tr.style.color               = 'white';  
 } else {
  tr.style.backgroundColor     = trBG[riga];
  tr.style.color               = trCO[riga];    
  trBG[riga]                   = null;  
  trCO[riga]                   = null;
 } // if (tdata.style.sav_backgroundColor == null)
} // function rEvidenzia(tr)

//-->
</script>


</head>
<body>
<table summary="" cellpadding="0" >
<tr  class="normal1" onmouseover="rOver(this);" onmouseout="rOut(this);" onclick="rEvidenzia(this,0);">
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr  class="normal2" onmouseover="rOver(this);" onmouseout="rOut(this);" onclick="rEvidenzia(this,1);">
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr  class="normal1" onmouseover="rOver(this);" onmouseout="rOut(this);" onclick="rEvidenzia(this,2);">
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
</tr>
<tr  class="normal2" onmouseover="rOver(this);" onmouseout="rOut(this);" onclick="rEvidenzia(this,3);">
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
<td>AAAAAAAAAAAAAAAAAAAAA</td>
</tr>
</table>
</body>
</html>

**uboz** · 14-04-2005, 18:31

Scusa cosa cambia?

**badaze** · 15-04-2005, 07:50

Originariamente inviato da uboz
Scusa cosa cambia?

Funziona anche su firefox.

**uboz** · 18-04-2005, 19:39

Grazie mille

Discussione: JS cambio colore cella

Strumenti discussione

Ricerca discussione

Visualizza

JS cambio colore cella

Permessi di invio