Afficher un array dans un tableau html [Résolu]
xzonz
- Messages postés
- 103
- Date d'inscription
- mardi 13 janvier 2004
- Dernière intervention
- 18 février 2014
- Messages postés
- 103
- Date d'inscription
- mardi 13 janvier 2004
- Dernière intervention
- 18 février 2014
A voir également:
- Igmsrc
- PHP : Afficher / convertir un array php multidimention en tableaux html inbriqué - print_r - - Guide
- Affichage d'un tableau html à partir d'un array - Codes sources - PHP (Divers)
- Afficher un array() en html en précisant le nombre de colonne - Codes sources - PHP (Astuces)
- PHP : Conversion d'un tableau html en array php - CodeS SourceS - Guide
- Affichage en tableau : afficher des données dans un tableau - Conseils pratiques - PHP
5 réponses
Meilleure réponse
- Messages postés
- 268
- Date d'inscription
- lundi 9 janvier 2006
- Dernière intervention
- 19 janvier 2017
<script type="text/javascript">
var arImg=new Array();//Création du tableau d'images
arImg[0]="img1.jpg";//affectation des images aux éléments du tableau
arImg[1]="img2.jpg";
...
...
...
arImg[n]="imgx.jpg";
function showImg() {
/*Fonction d'affichage des images dans un tableau HTML de 7 colonnes et de nbLn lignes */
var tbs=document.createElement("table");//Création du tableau HTML
var n=0;//Initialisation des variables des boucles for
var m=0;
//Calcul du nombre de lignes
if ((arImg.length % 7) > 0) {//Division du nombre d'image par 7
var nbLn=Math.floor(arImg.length / 7) + 1;//division non entière
}
else {
var nbLn=arImg.length / 7;//division entière
}
var ptImg=0; //Pointeur image
for (n=0;n<nbLn;n++) {//Insertion des lignes du tableau
var tln=tbs.insertRow[n];
for (m=0;m<7;m++) {//Insertion des cellules dans les lignes
var tcel=tln.insertCell[m];
if (ptImg
Mon script avec beaucoup plus de commentaires afin que vous compreniez mieux
le fonctionnement de la fonction showImg().
var arImg=new Array();//Création du tableau d'images
arImg[0]="img1.jpg";//affectation des images aux éléments du tableau
arImg[1]="img2.jpg";
...
...
...
arImg[n]="imgx.jpg";
function showImg() {
/*Fonction d'affichage des images dans un tableau HTML de 7 colonnes et de nbLn lignes */
var tbs=document.createElement("table");//Création du tableau HTML
var n=0;//Initialisation des variables des boucles for
var m=0;
//Calcul du nombre de lignes
if ((arImg.length % 7) > 0) {//Division du nombre d'image par 7
var nbLn=Math.floor(arImg.length / 7) + 1;//division non entière
}
else {
var nbLn=arImg.length / 7;//division entière
}
var ptImg=0; //Pointeur image
for (n=0;n<nbLn;n++) {//Insertion des lignes du tableau
var tln=tbs.insertRow[n];
for (m=0;m<7;m++) {//Insertion des cellules dans les lignes
var tcel=tln.insertCell[m];
if (ptImg
Mon script avec beaucoup plus de commentaires afin que vous compreniez mieux
le fonctionnement de la fonction showImg().
Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire
130 internautes nous ont dit merci ce mois-ci
- Messages postés
- 1670
- Date d'inscription
- vendredi 9 mai 2008
- Dernière intervention
- 25 février 2019
bonjour voila un exemple qui crée un tableau, ajoute une ligne puis ajoute des colonne dans lesquelles on crée une balise img que l'on alimente par un array
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script language="JavaScript" type="text/javascript"> tbgema= new Array('5.jpg','32.jpg','33.jpg','34.jpg','71.jpg','78.jpg','83.jpg','89.jpg','92.jpg','10.jpg') function ttb(){ var tbs=document.createElement('table'); tbs.insertRow(-1) for(var i = 0; i < tbgema.length; i++) { tbs.rows[0].insertCell(i) var igm=document.createElement('img') igm.src=tbgema[i]; tbs.rows[0].cells[i].appendChild(igm); } document.body.appendChild(tbs); } </script> </head> marche </html>
- Messages postés
- 268
- Date d'inscription
- lundi 9 janvier 2006
- Dernière intervention
- 19 janvier 2017
Moi je génèrerais le code suivant :
<script type="text/javascript">
var arImg=new Array();
arImg[0]="img1.jpg";
arImg[1]="img2.jpg";
...
...
...
arImg[n]="imgx.jpg";
function showImg() {
var tbs=document.createElement("table");
var n=0;
var m=0;
//Calcul du nombre de lignes
if ((arImg.length % 7) > 0) {
var nbLn=(arImg.length / 7) + 1;//division non entière
}
else {
var nbLn=(arImg.length / 7;//division entière
}
var ptImg=0; //Pointeur image
for (n=0;n<nbLn;n++) {
var tln=tbs.insertRow[n];
for (m=0;m<7;m++) {
var tcel=tln.insertCell[m];
if (ptImg
J'utiliserais ensuite un élément pour lancer la fonction showImg() à partir de
l'attribut événementiel onclick de cet élément.
Si cela peut aider!...
<script type="text/javascript">
var arImg=new Array();
arImg[0]="img1.jpg";
arImg[1]="img2.jpg";
...
...
...
arImg[n]="imgx.jpg";
function showImg() {
var tbs=document.createElement("table");
var n=0;
var m=0;
//Calcul du nombre de lignes
if ((arImg.length % 7) > 0) {
var nbLn=(arImg.length / 7) + 1;//division non entière
}
else {
var nbLn=(arImg.length / 7;//division entière
}
var ptImg=0; //Pointeur image
for (n=0;n<nbLn;n++) {
var tln=tbs.insertRow[n];
for (m=0;m<7;m++) {
var tcel=tln.insertCell[m];
if (ptImg
J'utiliserais ensuite un élément pour lancer la fonction showImg() à partir de
l'attribut événementiel onclick de cet élément.
Si cela peut aider!...
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.