Selezionare le righe di una table

**sarav** · 02-09-2004, 14:12

Ciao a tutti,
ho una pagina con una tabella con ID="MyTable".
Vorrei che quando l'utente fa click su una riga, lo sfondo di quest'ultima cambi colore affinche appaia evidenziata.
Ho pensato di realizzare una funzione javascript che riceve in input un parametro "inte_index identificante l'indice della riga selezionata (es. se l'utente clicca sulla prima riga il parametro varrà zero, se cliccherà sula seconda 1 e così via) e che viene richiamata in caso si verifichi l'evento OnClick su una riga.
A questo punto mi chiedo :master: : quale sarà il contenuto di questa funzione? In altre parole, come faccio a dire: "imposta lo sfondo della riga di MyTable che si trova in posizione item_index a yellow"?

**kluster** · 02-09-2004, 14:22

dovrebbe essere bgcolor per netscape e background per ie e supporto DOM

document.layers[ID].bgcolor

document.all[ID].style.background IE

document.getElementById(ID).style.background per il DOM

sull'ultimo ho dei dubbi

**badaze** · 02-09-2004, 14:45

Prova questo. Funziona per IE. Quando passi sopra cambia il colore. Quando clicchi su una riga la evidenzia e quando clicchi di nuovo ripristina il colore di prima.

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>

Discussione: Selezionare le righe di una table

Strumenti discussione

Ricerca discussione

Visualizza

Selezionare le righe di una table

Permessi di invio