Cambiare colore delle righe in una tabella.

**eroedelsilenzio** · 12-08-2005, 09:49

Ciao a tutti!

Leggendo il titolo di questo topic, il mio problema può apparire banale, ma non credo sia così.

Sto lavorando su una tabella derivata da un'interrogazione sql al server, e sono riuscito a rendere la tabella stessa ordinabile in base a un singolo campo all'onclick della testata relativa al campo stesso (mi spiego meglio: se ho una tabella con campi CODICE, DESCRIZIONE E TIPO, se clicco su CODICE effettua un ordinamento lato client in base a CODICE, se clicco su DESCRIZIONE lo fa in base al campo DESCRIZIONE e via dicendo).

Dal momento che questo modo di lavorare è frutto di una tecnologia ibrida ASP + JavaScript, io coloro alternativamente, durante la composizione della tabella, le righe della stessa di colori diversi (cioè prima riga bianco, seconda riga grigio chiaro, terza riga bianco, quarta riga grigio chiaro e così via).

Cosa succede quando io ordino le varie righe cliccando sulla testata di un campo? Succede che le righe vengono ordinate nel modo giusto, ma anche che, dato che il colore di sfondo fa parte di esse, quando clicco ad esempio sul campo CODICE mi ritrovo le prime tre righe grigio chiaro, le due successive bianche e così via, con tanti saluti all'alternatività di colore desiderata.

Avevo pensato di risolvere questa cosa con un piccolo script JS che, nelle intenzioni, deve prelevare il colore della prima riga della tabella e all'onclick sul campo nella testata, colorarle alternativamente come desiderato, ma sinceramente non so come si prelevi il colore dalla prima riga (non testata) della table

(ho provato con un patetico this.table.rows[1].bgcolor ma Internet Explorer mi risponde più o meno così:

).

Qualcuno di voi può aiutarmi?

**Dave-Z** · 12-08-2005, 09:52

non capisco cosa fai con javascript, io le stesse cose che hai detto le faccio tutte tramite coldfusion...

sei sicuro di non riuscire a fare tutto via asp?

**eroedelsilenzio** · 12-08-2005, 10:02

Originariamente inviato da Dave-Z
non capisco cosa fai con javascript, io le stesse cose che hai detto le faccio tutte tramite coldfusion...

sei sicuro di non riuscire a fare tutto via asp?

Ormai la procedura è funzionante in javascript, rifarla da zero in ASP non solo implicherebbe un sacco di tempo in più, ma appesantirebbe di molto il sito.

Io comunque coldfusion non l'ho mai utilizzato, quindi per me praticamente non c'è scampo... o javascript o niente...

**Xinod** · 12-08-2005, 10:09

ciao
si puo' vedere l' html di una riga-tipo?

**eroedelsilenzio** · 12-08-2005, 10:15

Originariamente inviato da Xinod
ciao
si puo' vedere l' html di una riga-tipo?

Per me non ci sono problemi, il discorso è che rischia di essere un po' ermetica dal momento che oltre ad essere generata in ASP richiama delle funzioni da librerie esterne.

Guarda un po' se ci capisci qualcosa...

<%

for j=0 to (NRighe-1)

choose= j mod 2

if (choose=0) then
color="#FFFFFF"
else
color="#FADCA8"
end if

%>
<tr bgcolor="<%=color%>">
<%
for i=0 to UBound(MyField)

%>
<td width="<%=tdW(i)%>" valign="middle" align="left">
<font class="g">
<%
if (MyField(i) <> "Località") and (MyField(i) <> "Indirizzo") then %>
<a href="#" onclick="javascript:Closer(<%=db_GetField("Codice" )%>,<%=db_GetField("Codice")%>)">
<%
end if

Response.Write(trim(db_GetField(MyField(i))))

if (MyField(i) = "Codice") then
Response.Write("</a>")
end if
%>
</font>
</td>

<td width="<%=tdSpc%>"></td>
<%
next
%>
</tr>

**Xinod** · 12-08-2005, 12:21

html risultante, non misto ad asp (non lo uso, posso solo intuire quello che fa)

cmq quello che c' era da vedere l' ho visto
cioe' che in questo caso non usi i css come andrebbe fatto,
personalmente non mi piace ...ma l' applicazione e' tua ...quindi

codice:

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

<html>
<head>
<title>cambia bgcolor alterni a tr</title>
<script language="JavaScript" type="text/javascript">
<!--
function cambiaColore(){
  if(document.getElementById && document.getElementsByTagName){
    var tbl=document.getElementById('miatabella');
    var trs=tbl.getElementsByTagName('TR')
    for(var k=0;k<trs.length;k++){
      trs[k].setAttribute('bgColor',((k%2==0)?'#fadca8':'#ffffff'));
    }
  }
}
//-->
</script>
</head>
<body>
<table id="miatabella">
<tr bgcolor="#ffffff">
<td>a</td><td>b</td><td>c</td>
</tr>
<tr bgcolor="#fadca8">
<td>a</td><td>b</td><td>c</td>
</tr>
<tr bgcolor="#ffffff">
<td>a</td><td>b</td><td>c</td>
</tr>
<tr bgcolor="#fadca8">
<td>a</td><td>b</td><td>c</td>
</tr>
<tr bgcolor="#ffffff">
<td>a</td><td>b</td><td>c</td>
</tr>
</table>
cambiaColore()
</body>
</html>

qualunque siano le funzioni che ordinano le righe, alla fine di esse richiama cambiaColore()

ciao

**eroedelsilenzio** · 12-08-2005, 19:29

No problema, ho risolto con un javascript semplice ma efficace!

**Xinod** · 12-08-2005, 21:25

bene,
sarebbe bello rendere il resto del forum partecipe di questo javascript semplice ma efficace

**eroedelsilenzio** · 12-08-2005, 23:02

Eccolo qui.

<script type="text/javascript">

onload=alternate;

function alternate(){

if(document.getElementsByTagName){
var table = document.getElementById("table-1");
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>

Chiaramente table-1 è l'id della mia tabella, ed even e odd sono due classi presenti nel foglio di stile.

Inoltre l'onload mi ha dato modo di cancellare la precedente colorazione effettuata tramite ASP.

L'effetto è stato ottenuto combinando questo script con quello che ho trovato nel nostro archivio in cui si possono ordinare le tabelle in base a ciò che si clicca sui campi <th> della testata. La funzione "onload" invece è richiamata all'evento onClick dell'intera testata tHead.

Discussione: Cambiare colore delle righe in una tabella.

Strumenti discussione

Ricerca discussione

Visualizza

Cambiare colore delle righe in una tabella.

Permessi di invio