Afficher un array dans un tableau html [Résolu]
xzonz
- Messages postés
- 105
- Date d'inscription
- mardi 13 janvier 2004
- Statut
- Membre
- Dernière intervention
- 18 mai 2019
- Messages postés
- 105
- Date d'inscription
- mardi 13 janvier 2004
- Statut
- Membre
- Dernière intervention
- 18 mai 2019
A voir également:
- Igmsrc
- PHP : Afficher / convertir un array php multidimention en tableaux html inbriqué - print_r - - Guide
- Afficher des données mysql en php dans un tableau html - Conseils pratiques - PHP
- PHP : Affichage d'un tableau html à partir d'un array - CodeS SourceS - Guide
- 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
5 réponses
Meilleure réponse
- Messages postés
- 268
- Date d'inscription
- lundi 9 janvier 2006
- Statut
- Membre
- 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
191 internautes nous ont dit merci ce mois-ci
- Messages postés
- 1731
- Date d'inscription
- vendredi 9 mai 2008
- Statut
- Modérateur
- Dernière intervention
- 1 décembre 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
- Statut
- Membre
- 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!...