Cambio sfondo <tr> OnClick e mantenerlo fino a quando non si clicca un altra <tr>

**davidl77** · 03-02-2008, 11:44

Ciao a tutti.

Un quesito che sembra simile ad altri ma non lo è.

Io ho una tabella in cui le righe vengono colorate in modo dinamico tramite js. Vorrei che all'onclick cambiasse colore e lo mantenesse finché non clicco su un altra <tr>.

Quando clicco su un'altra <tr> la cella su cui avevo cliccato prima deve tornare al vecchio colore (che non so quale sia, in quanto generato automaticamentge), e la nuova cella deve cambiare colore.

Come posso fare?

Grazie mille!

**AvOJaromil** · 03-02-2008, 11:57

credo che se vorrai qualche risposta diversa da questa dovrai spiegare meglio il tuo problema.
magari con l'aggiunta di codice

**davidl77** · 03-02-2008, 12:10

Ciao e grazie.

Il link mi rimanda a QUESTO tread. Puoi per favore vedere se è corretto? Grazie mille!!

**AvOJaromil** · 03-02-2008, 13:27

scusa ma mi sono svegliato spiritoso e rompiballe.
intendevo dire che la descrizione del tuo problema è troppo vaga.
se aggiungi del codice oppure spieghi meglio sarà più facile trovare una soluzione.

la prima cosa che mi viene in mente; quando generi dinamicamente il colore lo "memorizzi" in un attributo di tr, per esempio "id". cambi il suo colore poi quando lo vuoi riportare al suo colore originale lo leggi dall'attributo in cui lo avevi salvato

**davidl77** · 03-02-2008, 23:44

Ciao!
Scusa, hai ragione tu.

Sotto riporto il codice della pagina, dove, come puoi notare ho già una parte che all'onclick mi legge il name della <tr>. Vorrei anche aggiungere la parte del cambia colore. Se volessi seguire la strada come potrei fare? Sono un 'very newbie' del JS!

Grazie mille!

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<HTML> <HEAD>
<TITLE>
SSP Version 0.0 - USER d - Anno: ND - Azienda ND </TITLE>

<meta name=generator content="Prove e test ssp">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" href="../../COMMON/CSS/top.css" type="text/css"><link rel="shortcut icon" href="../../COMMON/ICONS/test.ico" type="image/x-icon">

<STYLE NG="replaced" >
body {
margin: 1px;
font-family: "lucida grande", verdana, lucida, sans-serif;
font-size: 8pt;
}

li {
padding-bottom: 4px;
line-height: 1.5em;
text-align: justify;
}

p {
text-align: justify;
line-height: 140%;

}
acronym {
font-style: normal;
border-bottom: 1px dotted #ddd;
}

code, pre {
font-family: courier, monospace;
color: green;
}

#bottle {
width: 410px;
}

#playlist {
border: 1px solid #666666;
}

#playlist td {
font-family: "lucida grande", verdana, sans-serif;
font-size: 6pt;
padding: 3px 8px;
border-left: 1px solid #D9D9D9;
}

#playlist tr.selected td {
background-color: #3d80df;
color: #ffffff;
font-weight: bold;
border-left: 1px solid #346DBE;
border-bottom: 1px solid #7DAAEA;
}
</STYLE>

<style type="text/css">

#playlist {
border: 1px solid #666666;
}

#playlist tbody tr td {
font-family: "lucida grande", verdana, sans-serif;
font-size: 6pt;
padding: 3px 6px;
border-left: 1px solid #D9D9D9;
}

#playlist tbody tr.selected td {
background-color: #3d80df;
color: #ffffff;
font-weight: bold;
border-left: 1px solid #346DBE;
border-bottom: 1px solid #7DAAEA;
}
</style>

<script language="Javascript">

var pars="";

function AIC(me){ //AddIDToidchanged
me.style.background = "#0AFF00"; //background-color to green to let user know must use ajax
var melength=me.name.length; // had to use length bec autoid can get larger than just 1 ,2,3,4, or 5 digits.
var id=(me.name.substr(3,melength)); // will always be 3(f00) then autoid digits.
if (id){
var str=document.getElementById("idchanged").value; // if not sure how works then unhide the field on the form
if (str==""){
document.getElementById("idchanged").value=str + id;
document.getElementById("nascosto").value=str + id;
}else{
if (!str.match(id)){
document.getElementById("idchanged").value=str + "," + id;
document.getElementById("nascosto").value=str + "," + id;
}}
// this added for ajax

if (pars==""){
pars=me.name + "=" + me.value;
}else{
pars=pars+"&"+me.name+"="+me.value;
}}
}

function SetActiveID_2(me){
//alert (me);
var id=(me.getAttribute("name").substr(12,14));
//form.activeid.value=me.name;
//elem = document.getElementById(ID).value;
document.getElementById("nasc_new").value = me.getAttribute("name");
}
function hasClass(obj) {
var result = false;
if (obj.getAttributeNode("class") != null) {
result = obj.getAttributeNode("class").value;
}
return result;
}

function stripe(id) {
// http://www.alistapart.com/d/stripedtables/example.html
// the flag we'll use to keep track of
// whether the current row is odd or even
var even = false;

// if arguments are provided to specify the colours
// of the even & odd rows, then use the them;
// otherwise use the following defaults:
var evenColor = arguments[1] ? arguments[1] : "#fff";
var oddColor = arguments[2] ? arguments[2] : "#eee";

// obtain a reference to the desired table
// if no such table exists, abort
var table = document.getElementById(id);
if (! table) { return; }

// by definition, tables can have more than one tbody
// element, so we'll have to get the list of child
// <tbody>s
var tbodies = table.getElementsByTagName("tbody");

// and iterate through them...
for (var h = 0; h < tbodies.length; h++) {

// find all the <tr> elements...
var trs = tbodies[h].getElementsByTagName("tr");

// ... and iterate through them
for (var i = 0; i < trs.length; i++) {

// avoid rows that have a class attribute
// or backgroundColor style
if (! hasClass(trs[i]) &&
! trs[i].style.backgroundColor) {

// get all the cells in this row...
var tds = trs[i].getElementsByTagName("td");

// and iterate through them...
for (var j = 0; j < tds.length; j++) {

var mytd = tds[j];

// avoid cells that have a class attribute
// or backgroundColor style
if (! hasClass(mytd) &&
! mytd.style.backgroundColor) {

mytd.style.backgroundColor =
even ? evenColor : oddColor;

}
}
}
// flip from odd to even, or vice-versa
even = ! even;
}
}
}

</SCRIPT>

</head>
<body onload="stripe('playlist', '#fff', '#edf3fe');"><a name="top"></a>
<form method=post action="./../ABILITAZIONE/save.php">
<table id = "playlist" frame = box border = 1 cellspacing="0">
<tr><td width="0%"></td>

<td>Legal entity enabling </td>
<td>Roles</td>
<td>Password modification</td>
<td>Other user details</td>
<td>Login name</td>
<td>First name</td>
<td>Last name</td>
<td>E-mail address</td>

<td>Enabled</td>
</tr>

<tr id= "ID1" onclick="SetActiveID_2(this);" onFocus="SetActiveID_2(this,this.id);" onmouseover="this.style.background='#D0D0D0';" onmouseout="this.style.background='white';" name ="UNO">
<td width="0%"><input type="hidden" name="USER_ID[0]" value="UNO" disable = "disabled"></td>
<td><input type="submit" name="LE_AB[0]" value = "Abilitazione aziende"></td>
<td><input type="submit" name="ROLES_AB[0]" value = "Ruoli"></td>
<td><input type="button" name = "Mod_pwd"
onClick = window.open("./../PASSWORD/password.php?USER_ID=062be1fc-ca11-102a-9eae-71cfbb3cf82a","newwin","scrollbars=no,status=no,re sizable=yes,top=300,left=150,width=300,height=750" ) value = "Password modification " ></td>
<td><input type="button" name = "Mod_dett"
onClick = window.open("usr_details.php?USER_ID=062be1fc-ca11-102a-9eae-71cfbb3cf82a","newwin","scrollbars=no,status=no,re sizable=yes,top=300,left=150,width=300,height=750" ) value = "Other user details " ></td>
<td>david </td>
<td>d</td>

<td>d</td>
<td>cicici</td>
<td><textarea rows="1" cols="1"class="boldblue"style="font:arial;"name="0 62be1fc-ca11-102a-9eae-71cfbb3cf82a"WRAP="virtual" onchange="AIC(this)" onclick="SetActiveID(this,this.form);"onFocus="Set ActiveID(this,this.form); "></textarea></td>
<td> <input type= 'checkbox' name='FLG_ROLE_CODE_EDIT'></td></tr>

<tr id= "ID2" onclick="SetActiveID_2(this);" onFocus="SetActiveID_2(this,this.id);" onmouseover="this.style.background='#D0D0D0';" onmouseout="this.style.background='white';" name ="DUE">
<td width="0%"><input type="hidden" name="USER_ID[0]" value="DUE" disable = "disabled"></td>
<td><input type="submit" name="LE_AB[0]" value = "Abilitazione aziende"></td>
<td><input type="submit" name="ROLES_AB[0]" value = "Ruoli"></td>
<td><input type="button" name = "Mod_pwd"
onClick = window.open("./../PASSWORD/password.php?USER_ID=062be1fc-ca11-102a-9eae-71cfbb3cf82a","newwin","scrollbars=no,status=no,re sizable=yes,top=300,left=150,width=300,height=750" ) value = "Password modification " ></td>
<td><input type="button" name = "Mod_dett"
onClick = window.open("usr_details.php?USER_ID=062be1fc-ca11-102a-9eae-71cfbb3cf82a","newwin","scrollbars=no,status=no,re sizable=yes,top=300,left=150,width=300,height=750" ) value = "Other user details " ></td>

<td>david </td>
<td>d</td>
<td>d</td>
<td>cicici</td>
<td><textarea rows="1" cols="1"class="boldblue"style="font:arial;"name="0 62be1fc-ca11-102a-9eae-71cfbb3cf82a"WRAP="virtual" onchange="AIC(this)" onclick="SetActiveID(this,this.form);"onFocus="Set ActiveID(this,this.form); "></textarea></td>
<td> <input type= 'checkbox' name='FLG_ROLE_CODE_EDIT'></td></tr>

</table>

</form>

<form action="pippo.php" method="POST">
<input type="text" id="nasc_new" name="idchanged" value="">
<input type="submit">
</form>

</body>
</HTML>

**davidl77** · 06-02-2008, 23:29

Nessuna risposta?

**Igreo** · 07-02-2008, 10:17

Guarda qui... è la stessa cosa (almeno credo) fatta su dei div

http://forum.html.it/forum/showthrea...readid=1183685

Ciao!

**davidl77** · 11-02-2008, 09:34

Ni...
nel senso che in quel post si suppone che siano fatti tutti dello stesso colore.

Io in realtà ho un problema aggiuntivo: a priori non so un div che sfondo ha, perché lo assegno in automatico.

la soluzione potrebbe essere che quando seleziono un div ne memorizzo il colore originario in una variabile, e il div_id in un altra.

Poi quando clicco un nuovo div, riporto il veccho div_id al colore orioginario precedentemente memorizzato. Questa più o meno è la logica, ma non riesco a tradurla in codice!

**deleted_110** · 11-02-2008, 10:21

la tua proposta e' corretta, dove e' che trovi problemi?

Ricordati che le variabili le devi definire a livello globale. Quindi nel tag <script> nell''head

cosi' ad esempio

var lastSelectedColor = "";
var lastSelectedElement = "";

poi nella funzione che richiami all'onclick metti qualcosa del genere

Codice PHP:


if(lastSelectedElement && lastSelectedColor)

    lastSelectedElement.style.backgroundcolor = lastSelectedColor;



// ho ipotizzato che [b]me[/b] sia l'elemento cliccato!!! Verifica se e' corretto!!!

lastSelectedElement = me;  

lastSelectedColor = me.style.backgroundcolor;



me.style.backgroundcolor= "blue"; // qua metti il nuovo colore

Non l'ho testato, prova e fammi sapere.

PS

quando posti del codice mettilo tra tag [c o d e] o se preferisci [p h p] (senza spazi) altrimenti e' illeggibile

**davidl77** · 11-02-2008, 20:43

Funziona, seppur con una piccola modifica. Infatti usando la classe mi funziona, ma non con l'attributo backgrouncolor. Qui la funzione modificata. Non male per un newbie, eh

Grazie mille per l'aiuto!!!!

codice:

function changecolor(me)
{
if(lastSelectedElement && lastSelectedColor)
    lastSelectedElement.className = lastSelectedColor;
lastSelectedElement = me;  
lastSelectedColor = me.className; 
me.className = "selected";
}

L'intero codice invece è questo:

codice:


<!doctype html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<HTML>  <HEAD>
<script language="Javascript">


var pars="";

var lastSelectedColor = "";
var lastSelectedElement = "";

function changecolor(me)
{

if(lastSelectedElement && lastSelectedColor)
    lastSelectedElement.className = lastSelectedColor;


lastSelectedElement = me;  
lastSelectedColor = me.className; 


me.className = "selected";
}



function alternate(id){ 
 if(document.getElementsByTagName){  
   var table = document.getElementById(id);   
   var rows = table.getElementsByTagName("tr");   
   for(i = 0; i < rows.length; i++){           
 //manipulate rows 
     if(i % 2 == 0){ 
       rows[i].className = "even"; 
     }else{ 
       rows[i].className = "odd"; 
     }       
   } 
 } 
}
</SCRIPT>

<style> 
 .odd{background-color: white;} 
 .even{background-color: gray;} 
 .selected{background-color: red;} 
</style>
</head>
<body onload="alternate('thetable')"> 
<table id="thetable"> 
<tr><td width="0%"></td> 
<td>Legal entity enabling </td>
   <td>Last name</td> 
   <td>E-mail address</td>
   <td>Enabled</td>
   </tr>
<tr id= "ID1" onclick="changecolor(this);"  name ="AAA">
<td width="0%"><input type="hidden" name="USER_ID[0]" value="AAA" disable = "disabled"></td>
<td>d</td>
<td>d</td>
<td>cicici</td>
<td></td>
<td> <input type= 'checkbox' name='FLG_ROLE_CODE_EDIT'></td></tr>
<tr id= "ID2" onclick="changecolor(this);"  name ="BBB">
<td width="0%"><input type="hidden" name="USER_ID[0]" value="BBB" disable = "disabled"></td>
<td>d</td>
<td>d</td>
<td>cicici</td>
<td></td>
<td> <input type= 'checkbox' name='FLG_ROLE_CODE_EDIT'></td></tr>
<tr id= "ID3" onclick="changecolor(this);"  name ="BBB">
<td width="0%"><input type="hidden" name="USER_ID[0]" value="BBB" disable = "disabled"></td>
<td>d</td>
<td>d</td>
<td>cicici</td>
<td></td>
<td> <input type= 'checkbox' name='FLG_ROLE_CODE_EDIT'></td></tr>
</table>
</form>

</body>
</HTML>

Discussione: Cambio sfondo <tr> OnClick e mantenerlo fino a quando non si clicca un altra <tr>

Strumenti discussione

Ricerca discussione

Visualizza

Cambio sfondo <tr> OnClick e mantenerlo fino a quando non si clicca un altra <tr>

Permessi di invio