Menu Principale

Il tuo indirizzo IP

Eccolo: 38.107.179.218
Home Tutorials Active Server Page Semplice alternato delle righe di una tabella HTML
Semplice alternato delle righe di una tabella HTML E-mail
Valutazione attuale: / 0
ScarsoOttimo 
Mercoledì 05 Dicembre 2001 09:26
Portale Data Download file
www.mmkit.com 5 Dicembre 2001 ---

Questo tutorial mostrerà come utilizzare i CSS e il JavaScript per ottenere la visualizzazione con colori alternati nonchè utilizzare un terzo colore per evidenziare la riga su cui si trova il puntatore del mouse aggiungendo e modificando parte del codice generato da Ultradev.

Prima di tutto dobbiamo creare una repeated region come normalmente viene fatto con Ultradev in un recordset.

L'idea è creare alcune classi CSS che verranno utilizzate per settare i tre colori delle righe (2 colori per l'alternato e uno del passaggio mouse).

Prima settiamo gli stili dei link e delle tabelle in questo modo:

a {
  font-family : Verdana,Arial;
  color : #004080;
}
a:hover {
  font-family : Verdana,Arial;
  color : #FFFFFF;
}
table {
  font-family: Verdana,Arial;
  color: #000000;
}

Secondo creiamo le 3 classi:

  • stile per primo colore riga
  • stile per secondo colore riga
  • stile per colore passaggio mouse (mouseover)

tr.RowOverFirst {
  background-color : #FCFCFC;
}
tr.RowOverSecond {
  background-color : #CFCFCF;
}
tr.RowOverSelected {
  color : #FFFFFF;
  background-color : #8080FF;
}

Ora che abbiamo definito i CSS che desideriamo utilizzare, dapprima creeremo la tabella vuota che conterrà i nostri dati:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Quindi applicheremo al tag <tr ..> lo stile RowOverFirst e, utilizzando il JavaScript, intercetteremo l'eventuale passaggio del mouse per modificare lo stile della riga in RowOverSelected:

<table>
  <tr class="RowOverFirst" onmouseover="this.className='RowOverSelected';" onmouseout="
        this.className='RowOverFirst';">
    <td></td>
    <td></td>
  </tr>
</table>

Alcune informazioni:

  • Le classi RowOverFirst e RowOverSecond settano i differenti colori di sfondo che abbiamo definito
  • Utilizzando l'evento onmouseover possiamo modificare il colore di sfondo della riga al passaggio del mouse applicandogli lo stile RowOverSelected
  • Utilizzando l'evento onmouseout possiamo ripristinare il colore di sfondo della riga quando il mouse si sposta oltre la riga.

Ora utilizziamo queste combinazioni per ottenere l'effetto desiderato applicandolo dopo aver creato la repeat region.

Il codice che verrà applicato sarà il seguente:

class="<%
  If (Repeat1__numRows Mod 2) Then
    Response.Write("RowOverFirst")
  Else
    Response.Write("RowOverSecond")
  End If
%>" onmouseover="this.className='RowOverSelected';" onmouseout="this.className='<%
  If (Repeat1__numRows Mod 2) Then
    Response.Write("RowOverFirst")
  Else
    Response.Write("RowOverSecond")
  End If
%>';"

Il codice della tabella, una volta applicato la repeat region sarà (con recordset chiamato rs_data):

<table>
<%
  While ((Repeat1__numRows <> 0) AND (NOT rs_data.EOF))
%>
  <tr>
    <td><%= (rs_data.Fields.Item("RepeatA").Value) %></td>
    <td><%= (rs_data.Fields.Item("RepeatB").Value) %></td>
  </tr>
<%
  Repeat1__index=Repeat1__index+1
  Repeat1__numRows=Repeat1__numRows-1
  rs_data.MoveNext()
Wend
%>
</table>

Che verrà modificato per aggiungere quello di gestione degli effetti di colore che desideriamo ottenere:

<table>
<%
  While ((Repeat1__numRows <> 0) AND (NOT rs_data.EOF))
%>
  <tr class="<%
    If (Repeat1__numRows Mod 2) Then
      Response.Write("RowOverFirst")
    Else
      Response.Write("RowOverSecond")
    End IF
    %>" onmouseover="this.className='RowOverSelected';" onmouseout="this.className='<%
    If (Repeat1__numRows Mod 2) Then
      Response.Write("RowOverFirst")
    Else
      Response.Write("RowOverSecond")
    End IF
    %>';">
    <td><%= (rs_data.Fields.Item("RepeatA").Value) %></td>
    <td><%= (rs_data.Fields.Item("RepeatB").Value) %></td>
  </tr>
<%
  Repeat1__index=Repeat1__index+1
  Repeat1__numRows=Repeat1__numRows-1
  rs_data.MoveNext()
Wend
%>
<table>

Ecco fatto ... salviamo il file ... e proviamo a vedere l'effetto che otteniamo.

Commenti
Nuovo
Commenta
Nome:
Email:
 
Titolo:
<<  

3.25 Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."