Mon tutorial original se trouve ici :
http://www.asp-php.net/tutorial/asp-php/tableaux.php
Tables simples
| Structure d'un tableau (table) : | affiche |
| <table>
<tr>
<td>ligne1 colonne1</td>
<td>ligne1 colonne2</td>
<td>ligne1 colonne3</td>
<td>ligne1 colonne4</td>
</tr>
<tr>
<td>ligne2 colonne1</td>
<td>ligne2 colonne2</td>
<td>ligne2 colonne3</td>
<td>ligne2 colonne4</td>
</tr>
...
</table> | | | ligne1 colonne1 | ligne1 colonne2 | ligne1 colonne3 | ligne1 colonne4 | | ligne2 colonne1 | ligne2 colonne2 | ligne2 colonne3 | ligne2 colonne4 | | ... | | | | |
a- Tableau de NbrCol colonnes par NbrLigne lignes :
| <html><body>
<%
' NbrCol : le nombre de colonnes
' NbrLigne : le nombre de lignes
' --------------------------------------------------------
response.write "<table>"
for i=1 to NbrLigne step 1
response.write "<tr>"
for j=1 to NbrCol step 1
response.write "<td>"
' ------------------------------------------
' AFFICHAGE ligne i, colonne j
response.write affichage
' ------------------------------------------
response.write "</td>"
next
response.write "</tr>"
j=1
next
response.write "</table>"
%>
</body></html> | |
b- Table de multiplication : exemple amélioré
| i X j | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 1 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 2 | 2 | 4 | 6 | 8 | 10 | 12 | 14 | 16 | 18 |
| 3 | 3 | 6 | 9 | 12 | 15 | 18 | 21 | 24 | 27 |
| 4 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 |
| 5 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 |
| 6 | 6 | 12 | 18 | 24 | 30 | 36 | 42 | 48 | 54 |
| 7 | 7 | 14 | 21 | 28 | 35 | 42 | 49 | 56 | 63 |
| 8 | 8 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 |
| 9 | 9 | 18 | 27 | 36 | 45 | 54 | 63 | 72 | 81 |
| <html><body>
<%
' NbrCol : le nombre de colonnes
' NbrLigne : le nombre de lignes
NbrCol = 9
NbrLigne = 9
' --------------------------------------------------------
' on affiche en plus sur les 1ere ligne et 1ere colonne
' les valeurs a multiplier (dans des cases en couleur)
' le tableau fera donc 10 x 10
' --------------------------------------------------------
response.write "<table border=""1"" width=""400"">"
' 1ere ligne (ligne 0)
response.write "<tr>"
response.write "<td bgcolor=""#CCCCCC"">"
response.write "i X j</td>"
for j=1 to NbrCol step 1
response.write "<td bgcolor=""#FFFF66"">"
response.write j & "</td>"
next
response.write "</tr>"
' --------------------------------------------------------
' lignes suivantes
for i=1 to NbrLigne step 1
response.write "<tr>"
for j=1 to NbrCol step 1
' 1ere colonne (colonne 0)
if (j=1) then
response.write "<td bgcolor=""#FFFF66"">"
response.write i & "</td>"
end if
' colonnes suivantes
if (i=j) then
response.write "<td bgcolor=""#FFCC66"">"
else
response.write "<td>"
end if
' ------------------------------------------
' AFFICHAGE ligne i, colonne j
response.write i*j
' ------------------------------------------
response.write "</td>"
next
response.write "</tr>"
j=1
next
response.write "</table>"
%>
</body></html> | |
Affichage "en ligne" avec array()
Affichage d'un certains nombres de données dans un tableau :
- On veut que le tableau fasse un nombre déterminé de colonnes.
Mais on ne connait pas à l'avance le nombre de données récupérées :
- il faut donc pouvoir afficher (automatiquement) autant de lignes que nécessaire.
Récupération des éléments d'un tableau Array()
A noter : le premier indice d'un array() est 0 (zéro)
a- AVEC calcul du nombre de lignes AVANT affichage
| L'exemple ci-dessous affiche : | le code généré : |
| elt0 | elt1 | elt2 | elt3 | | elt4 | elt5 | | | | | <table border="1">
<tr>
<td>elt0</td>
<td>elt1</td>
<td>elt2</td>
<td>elt3</td>
</tr>
<tr>
<td>elt4</td>
<td>elt5</td>
<td> </td>
<td> </td>
</tr>
</table> | |
| <html><body>
<%
' NbreData : le nombre de données a afficher
' NbrCol : le nombre de colonnes
' NbrLigne : calcul automatique AVANT affichage
' --------------------------------------------------------
' (exemple)
NbrCol = 4
tableau = array("elt0","elt1","elt2","elt3","elt4","elt5")
' --------------------------------------------------------
NbreData = ubound(tableau)+1
' --------------------------------------------------------
' calcul du nombre de lignes
if (round(NbreData/NbrCol)<>(NbreData/NbrCol)) then
NbrLigne = round((NbreData/NbrCol)+0.5)
else
NbrLigne = NbreData/NbrCol
end if
' --------------------------------------------------------
' affichage
if (NbreData <> 0) then
k = 0
response.write "<table border=""1"">"
for i=1 to NbrLigne step 1
response.write "<tr>"
for j=1 to NbrCol step 1
if (k<NbreData) then
response.write "<td>"
' ------------------------------------------
' AFFICHAGE de l'element
response.write tableau(k)
' ------------------------------------------
response.write "</td>"
k=k+1
else ' case vide
response.write "<td> </td>"
end if
next
response.write "<tr>"
j=1
next
response.write "</table>"
else
response.write "pas de données à afficher"
end if
%>
</body></html> | |
b- SANS calcul du nombre de lignes
C'est une façon différente d'aborder le problème :
- affichage "tant qu'il y a des données ..." (while ...)
-
L'astuce : on utilise la propriété "
modulo" (
Mod en ASP)
qui renvoie le reste de la division entière du 1er chiffre par le 2ème
Exemple :
| 1 Mod 4 = 1 | 2 Mod 4 = 2 | 3 Mod 4 = 3 | 4 Mod 4 = 0 |
| 5 Mod 4 = 1 | 6 Mod 4 = 2 | 7 Mod 4 = 3 | 8 Mod 4 = 0 |
| 9 Mod 4 = 1 | ... | | |
Donc :
- quand le modulo = 1 : première colonne
- quand le modulo = 0 : dernière colonne
Le nombre de lignes (NbrLigne) est incrémenté au fur et à mesure :
- on le récupère A LA FIN. éventuellement
- ou on l'intercepte en cours de route (pour pagination)
| L'exemple ci-dessous affiche : | le code généré : |
| elt0 | elt1 | elt2 | elt3 | | elt4 | elt5 | | | | | <table border="1">
<tr>
<td>elt0</td>
<td>elt1</td>
<td>elt2</td>
<td>elt3</td>
</tr>
<tr>
<td>elt4</td>
<td>elt5</td>
</tr>
</table> | |
| <html><body>
<%
' NbreData : le nombre de données a afficher
' NbrCol : le nombre de colonnes
' NbrLigne : calcul automatique a la FIN
' --------------------------------------------------------
' (exemple)
NbrCol = 4
tableau = array("elt0","elt1","elt2","elt3","elt4","elt5")
' --------------------------------------------------------
NbreData = ubound(tableau)+1
' --------------------------------------------------------
' affichage
NbrLigne = 0
if (NbreData <> 0) then
k = 0
j = 1
response.write "<table border=""1"">"
while (k < NbreData)
if (j Mod NbrCol = 1) then
NbrLigne = NbrLigne + 1
response.write "<tr>"
fintr = 0
end if
response.write "<td>"
' ------------------------------------------
' AFFICHAGE de l'element
response.write tableau(k)
' ------------------------------------------
response.write "</td>"
k=k+1
if (j Mod NbrCol = 0) then
response.write "</tr>"
fintr = 1
end if
j=j+1
wend
if (fintr<>1) then response.write "</tr>" end if
response.write "</table>"
else
response.write "pas de données à afficher"
end if
%>
</body></html> | |
Affichage "en ligne" avec base de données
Affichage de données récupérées par une requête dans une base de données.
- On veut afficher dans chaque case les données provenant d'un enregistrement
- On veut que le tableau fasse un nombre déterminé de colonnes.
Mais on ne connait pas à l'avance le nombre de données récupérées :
- il faut donc pouvoir afficher (automatiquement) autant de lignes que nécessaire.
Dans la partie "AFFICHAGE des DONNEES de la fiche" : Tout est possible !
- afficher plusieurs données,
- afficher des images,
- les organiser dans un tableau,
- ajouter des liens hypertext,
- ...
Même principe que "b- SANS calcul du nombre de lignes" :
- affichage "tant qu'il y a des données ..." while ...
- L'astuce : on utilise la propriété "modulo"
Exemple
La table MATABLE :
| champs | valeurs |
| NUM | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| DONNEE | banane | betterave | boule | pomme | ananas | baie | bille | citron | bonbon | ballon |
| TYPE | fruit | legume | jouet | fruit | fruit | fruit | jouet | fruit | douceur | jouet |
La requête : toutes les données commençant par un "b", classées par ordre alphabétique.
| L'exemple ci-dessous affiche : | le code généré : |
| baie
fruit | ballon
jouet | banane
fruit | betterave
legume | | bille
jouet | bonbon
douceur | boule
jouet | | | | <table border="1">
<tr>
<td>baie<br><i>fruit</i></td>
<td>ballon<br><i>jouet</i></td>
<td>banane<br><i>fruit</i></td>
<td>betterave<br><i>legume</i></td>
</tr>
<tr>
<td>bille<br><i>jouet</i></td>
<td>bonbon<br><i>douceur</i></td>
<td>boule<br><i>jouet</i></td>
</tr>
</table> | |
| <!-- #include file="_Connexion.asp"-->
<html><body>
<%
' NbreData : le nombre de données a afficher
' NbrCol : le nombre de colonnes
' NbrLigne : calcul automatique a la FIN
' --------------------------------------------------------
' (exemple)
NbrCol = 4
' requete
latable = "MATABLE"
condition = " WHERE DONNEE LIKE 'b% ' ORDER BY DONNEE ASC"
SQL = "SELECT * FROM "& latable & condition &";"
Set RS = server.createobject("ADODB.Recordset")
RS.Open SQL,Conn , 3, 3
' --------------------------------------------------------
NbreData = RS.recordcount
' --------------------------------------------------------
' affichage
NbrLigne = 0
if (NbreData <> 0) then
j = 1
response.write "<table border=""1"">"
while not RS.eof
if (j Mod NbrCol = 1) then
NbrLigne = NbrLigne + 1
response.write "<tr>"
fintr = 0
end if
response.write "<td>"
' ------------------------------------------
' AFFICHAGE des DONNEES de la fiche
response.write RS.fields("DONNEE")
response.write "<br>"
response.write "<i>" & RS.fields("TYPE") & "</i>"
' ------------------------------------------
response.write "</td>"
if (j Mod NbrCol = 0) then
response.write "</tr>"
fintr = 1
end if
j=j+1
RS.movenext
wend
if (fintr<>1) then response.write "</tr>" end if
response.write "</table>"
else
response.write "pas de données à afficher"
end if
%>
</body></html>
<%
' deconnexion de la base
Conn.close : Set Conn=nothing
%> | |
Affichage "en Colonne"
Les scripts précédents affichent les données "en ligne".
Affichage des résultats "en colonne" :
- pour un nombre de lignes (NbreLigne) défini,
- il faut pouvoir afficher (automatiquement) autant de colonnes que nécessaire.
a- Solution 1 (la plus simple)
Exemple avec Array() (même principe avec Base de données)
Principe :
- une table d'une ligne (invisible),
- dans chaque cellule : création d'une table d'1 colonne et NbreLigne lignes,
- ajout de cellules supplémentaires "tant qu'on a des données ..."
| L'exemple ci-dessous affiche : | le code généré : |
| | | <table><tr>
<td valign="top">
<table border="1">
<tr><td>elt0</td></tr>
<tr><td>elt1</td></tr>
<tr><td>elt2</td></tr>
</table>
</td>
<td valign="top">
<table border="1">
<tr><td>elt3</td></tr>
<tr><td>elt4</td></tr>
<tr><td>elt5</td></tr>
</table>
</td>
<td valign="top">
<table border="1">
<tr><td>elt6</td></tr>
<tr><td>elt7</td></tr>
<tr><td>elt8</td></tr>
</table>
</td>
<td valign="top">
<table border="1">
<tr><td>elt9</td></tr>
</table>
</td>
</tr></table> | |
| html><body>
<%
' NbreData : le nombre de données a afficher
' NbrLigne : le nombre de lignes
' NbrCol : le nombre de colonnes : calcul automatique
' --------------------------------------------------------
' (exemple)
NbrLigne = 3
tableau = array("elt0","elt1","elt2","elt3","elt4","elt5" ,"elt6","elt7","elt8","elt9")
' --------------------------------------------------------
NbreData = ubound(tableau)+1
' --------------------------------------------------------
NbrCol = 0
' affichage
if (NbreData <> 0) then
k = 0
response.write "<table><tr>"
while (k < NbreData)
response.write "<td valign=""top"">"
response.write "<table border=""1"">"
for i=1 to NbrLigne step 1
if (k < NbreData) then
response.write "<tr><td>"
' ---------------------------------------
' AFFICHAGE de l'element
response.write tableau(k)
' ---------------------------------------
response.write "</td></tr>"
k=k+1
end if
if (i = NbrLigne) then
response.write "</table>"
response.write "</td>"
end if
next
NbrCol = NbrCol + 1
wend
response.write "</tr></table>"
else
response.write "pas de données à afficher"
end if
%>
</body></html> | |
b- Solution 2, avec Array()
La solution 1 est efficace, mais pas satisfaisante si on souhaite bien aligner toutes les cellules.
Principe :
- une seule table,
- le remplissage se fait ligne par ligne en testant le "modulo" :
Exemple
10 éléments (elt0 à elt9) sur 3 lignes.
On doit les afficher dans cet ordre : (voir le code généré)
| ligne 0 : | elt0 - elt3 - elt6 - elt9 | 0 Mod 3 = 3 Mod 3 = 6 Mod 3 = 9 Mod 3 = 0 |
| ligne 1 : | elt1 - elt4 - elt7 | 1 Mod 3 = 4 Mod 3 = 7 Mod 3 = ... = 1 |
| ligne 2 : | elt2 - elt5 - elt8 | 2 Mod 3 = 5 Mod 3 = 8 Mod 3 = ... = 2 |
| L'exemple ci-dessous affiche : | le code généré : |
| elt0 | elt3 | elt6 | elt9 | | elt1 | elt4 | elt7 | | | elt2 | elt5 | elt8 | | | | <table border="1">
<tr>
<td>elt0</td>
<td>elt3</td>
<td>elt6</td>
<td>elt9</td>
</tr>
<tr>
<td>elt1</td>
<td>elt4</td>
<td>elt7</td>
</tr>
<tr>
<td>elt2</td>
<td>elt5</td>
<td>elt8</td>
</tr>
</table> | |
| <html><body>
<%
' NbreData : le nombre de données a afficher
' NbrLigne : le nombre de lignes
' NbrCol : le nombre de colonnes : calcul automatique
' --------------------------------------------------------
' (exemple)
NbrLigne = 3
tableau = array("elt0","elt1","elt2","elt3","elt4","elt5","elt6","elt7","elt8","elt9")
' --------------------------------------------------------
NbreData = ubound(tableau)+1
' --------------------------------------------------------
' affichage
if (NbreData <> 0) then
i = 0
NbrCol = 0
response.write "<table border=""1"">"
for i=0 to NbrLigne-1 step 1
response.write "<tr>"
j = 0
while ((i+(j*NbrLigne)) Mod NbrLigne=i and (i+(j*NbrLigne))<NbreData)
response.write "<td>"
' ---------------------------------------
' AFFICHAGE de l'element
k = i+(j*NbrLigne)
response.write tableau(k)
' ---------------------------------------
response.write "</td>"
j=j+1
if (NbrCol < j) then NbrCol = j end if
wend
response.write "</tr>"
next
response.write "</table>"
else
response.write "pas de données à afficher"
end if
%>
</body></html> | |
c- Solution 2, avec base de données
Le script utilisant les indices de tableau :
- création d'un tableau array() contenant les données récupérées.
| L'exemple ci-dessous affiche : | le code généré : |
| baie
fruit | bille
jouet | | ballon
jouet | bonbon
douceur | | banane
fruit | boule
jouet | | betterave
legume | | | | <table border="1">
<tr>
<td>baie<br><i>fruit</i></td>
<td>bille<br><i>jouet</i></td>
</tr>
<tr>
<td>ballon<br><i>jouet</i></td>
<td>bonbon<br><i>douceur</i></td>
</tr>
<tr>
<td>banane<br><i>fruit</i></td>
<td>boule<br><i>jouet</i></td>
</tr>
<tr>
<td>betterave<br><i>legume</i></td>
</tr>
</table> | |
| <!-- #include file="_Connexion.asp"-->
<html><body>
<%
' NbreData : le nombre de données a afficher
' NbrLigne : le nombre de lignes
' NbrCol : calcul automatique
' --------------------------------------------------------
' (exemple)
NbrLigne = 4
' requete
latable = "MATABLE"
condition =
" WHERE DONNEE LIKE 'b% ' ORDER BY DONNEE ASC"
SQL = "SELECT * FROM "& latable & condition &";"
Set RS = server.createobject("ADODB.Recordset")
RS.Open SQL,Conn , 3, 3
' --------------------------------------------------------
NbreData = RS.recordcount
' --------------------------------------------------------
' creation d'un tableau array() par donnees
dim tableau1() : redim tableau1(NbreData-1)
dim tableau2() : redim tableau2(NbreData-1)
k=0
while not RS.eof
tableau1(k) = RS.fields("DONNEE")
tableau2(k) = RS.fields("TYPE")
k=k+1
RS.movenext
wend
' --------------------------------------------------------
' affichage
if (NbreData <> 0) then
i=0
NbrCol=0
response.write "<table border=""1"">"
for i=0 to NbrLigne-1 step 1
response.write "<tr>"
j=0
while ((i+(j*NbrLigne)) Mod NbrLigne=i and (i+(j*NbrLigne))<NbreData)
response.write "<td>"
' ---------------------------------------
' AFFICHAGE de l'element
k = i+(j*NbrLigne)
response.write tableau1(k)
response.write "<br>"
response.write "<i>"&tableau2(k)&"</i>"
' ---------------------------------------
response.write "</td>"
j=j+1
if (NbrCol < j) then NbrCol = j end if
wend
response.write "</tr>"
next
response.write "</table>"
else
response.write "pas de données à afficher"
end if
%>
</body></html>
<%
Conn.close : Set Conn=nothing
%> | |
Astuce :
Au lieu de créer un tableau array() pour chaque donnée récupérée (tableau1, tableau2, ...),
il est possible de créer
un seul tableau array() :
- en PHP, c'est très simple et très pratique.
- en ASP, c'est plus délicat : il faut définir le nom des champs au moment de créer l'array().
(en savoir plus sur GetRows() : L'objet RecordSet - ADO GetRows Method )
| <%
' ...
' --------------------------------------------------------
' creation d'un seul array avec toutes les donnees
' il faut indiquer ici le tableau des champs a recuperer
tableau = RS.GetRows(,,array("DONNEE","TYPE"))
' ici, l indice de "DONNEE" est 0, celui de "TYPE" est 1
' --------------------------------------------------------
' affichage
' ...
' ---------------------------------------
' AFFICHAGE de l'element
k = i+(j*NbrLigne)
response.write tableau(0,k)
response.write "<br>"
response.write "<i>"&tableau(1,k)&"</i>"
' ---------------------------------------
' ...
%> | |