Afficher un array dans un tableau html
Résolu
xzonz
Messages postés
103
Date d'inscription
mardi 13 janvier 2004
Statut
Membre
Dernière intervention
23 novembre 2022
-
6 oct. 2011 à 13:09
xzonz Messages postés 103 Date d'inscription mardi 13 janvier 2004 Statut Membre Dernière intervention 23 novembre 2022 - 18 oct. 2011 à 18:53
xzonz Messages postés 103 Date d'inscription mardi 13 janvier 2004 Statut Membre Dernière intervention 23 novembre 2022 - 18 oct. 2011 à 18:53
5 réponses
cs_jperre
Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
18 oct. 2011 à 14:41
18 oct. 2011 à 14:41
<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().
@karamel
Messages postés
1855
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
18 avril 2024
153
6 oct. 2011 à 14:47
6 oct. 2011 à 14:47
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>
cs_jperre
Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
18 oct. 2011 à 14:17
18 oct. 2011 à 14:17
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!...
cs_jperre
Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
18 oct. 2011 à 14:22
18 oct. 2011 à 14:22
Une petite erreur à corriger dans mon code :
il y a :
var nbLn=(arImg.length / 7) + 1;//division non entière
il faut
var nbLn=Math.floor(arImg.length / 7) + 1;//division non entière
Excusez moi!...
il y a :
var nbLn=(arImg.length / 7) + 1;//division non entière
il faut
var nbLn=Math.floor(arImg.length / 7) + 1;//division non entière
Excusez moi!...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
xzonz
Messages postés
103
Date d'inscription
mardi 13 janvier 2004
Statut
Membre
Dernière intervention
23 novembre 2022
18 oct. 2011 à 18:53
18 oct. 2011 à 18:53
merci beaucoup c'est vraiment sympa
je pense que sans aide j'aurais mis ... disons beaucoup de temps
pour en arriver la
je vais décortiquer le code pour voir comment cela fonctionne.
et surtout le mettre de coté
merci Kazma et Jperre pour votre aide
Franck
je pense que sans aide j'aurais mis ... disons beaucoup de temps
pour en arriver la
je vais décortiquer le code pour voir comment cela fonctionne.
et surtout le mettre de coté
merci Kazma et Jperre pour votre aide
Franck
