Transformer un tableau javascript en un tableau html

Soyez le premier à donner votre avis sur cette source.

Snippet vu 22 322 fois - Téléchargée 19 fois

Contenu du snippet

Cette fonction prend en argument une variable javascript qui est un tableau, une matrice à x lignes et y colonnes, et le transforme en une table HTML aver entête (la 1ere ligne de la matrice en TH) et données. Cette table est un objet javascript qu'il faut "append" sur un DIV ou équivalent. tout simplement.

Un exemple tout simple? Soit "val" la variable matrice JS, et "obj" un objet DIV (obtenu en général avec obj = document.getElementById('nom_div'); ...):

obj.appendChild( CreateTableArray( val));

c'est tout!

Source / Exemple :


// génère un tableau HTML sur la base d'un tableau à 2 dimensions val[][]
// la 1ere ligne de val contient les entêtes
function CreateTableArray(val) {
	var tbl = document.createElement("TABLE");
	tbl.setAttribute("border", 1);
	var tr = document.createElement("TR");
	var tbody=document.createElement("TBODY");
	var thead=tbl.createTHead();
	var tfoot=tbl.createTFoot();	

	var n=val[0].length;
	for (var j = 0; j < n; j++) {
		var td = document.createElement("TH");
		td.appendChild(document.createTextNode(val[0][j]));
		tr.appendChild(td);
	}
	thead.appendChild(tr);
	
	m = val.length;
	for(var i = 1; i < m; i++){
		var tr = document.createElement("TR");
		for(var j = 0; j < n ;j++){
			var td=document.createElement("TD");
			td.appendChild(document.createTextNode(val[i][j]));
			tr.appendChild(td);
		}
		tbody.appendChild(tr);	
	}
	
	tbl.appendChild(thead);
	tbl.appendChild(tfoot);
	tbl.appendChild(tbody);
	return tbl;
}

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
14 février 2012

Bonjour,
tout d'abord merci pour ce code, étant plus habitué aux langages impératifs(ASP,Pascal et tout le bordel) cela m'avance beaucoup^^

mais je me demandais, c'est plutôt une question sur le java script, mais serait-il possible de créer un tableau de taille définie par l'utilisateur ?

je pensais à cela : mais il ne s'affiche pas
NbLigne = prompt("Entrez le nombre de lignes : ");
NbColonne = prompt("Entrez le nombre de colonnes : ");
var tabtab = new Array(NbLigne ,NbColonne );
var obj=document.getElementById('grid');
obj.appendChild(CreateTableArray(tabtab));

et tant que j'y suis je ne me gêne pas, mettre un textarea dans chaque cellule du tableau, imaginable ? possible ?

Merci d'avance de votre temps,

Cordialement, Guy
Messages postés
105
Date d'inscription
mardi 13 janvier 2004
Statut
Membre
Dernière intervention
18 mai 2019

salut :-)

cela m'a l'air super pratique en revanche je n'arrive pas l'utiliser.

j'aurais voulu savoir si c'est possible de passer un array javascript unidimensionnel tout en gardant la possibilité
de pouvoir mettre le nombre de lignes et colonnes que l'on veut.

voila le bout de code ou je charge le array que j'affiche dans un popup (il contient des liens d'images pour faire une galerie), ca fonctionne !

la ou je bloque c'est pour passer le tableau dans la fonction
et l'afficher dans le popup (pas besoin des entêtes)
un tableau de dix colonnes et x lignes (dépend du nombre d'images)

un petit exemple sous forme de code serait le bienvenu car
la je galère vraiment ...si tu peux m'aider ?

Merci beaucoup

F

//--------------------------------------------------------------------------
// génération de la galerie dans un popup
$('a.galerie').click(function(e){
var ell= e.target||event.srcElement;
divchoisi="#"+"div"+ell.id.substr(4);
var tab=new Array()
$(divchoisi + ".stylediv a").each(function() {
tab.push('['+$(this).attr('href')+' '+''+']')
});
w=open("",'popup','width=800,height=400,toolbar=yes,scrollbars=yes,resizable=yes,');
w.document.write('

');
w.document.write('
');
w.document.write(tab);
w.document.write('
');
w.document.write("");
w.document.close();
});
Messages postés
13
Date d'inscription
lundi 2 juin 2003
Statut
Membre
Dernière intervention
9 novembre 2009

Salut ;)
Tout ça est encore en test ;)
c'est vrai que les moches boutons bugués vont disparaitrent pour un meilleur design fonctionnel à 100%.
Mais le principe est là ;)

tiends, voila le code pour faire ce que tu a vu :

Le code HTML et JS :







// function CreateNewGrid(idgrid,divparent,tabtab)
var nbdiv=0;
var page=new Array();
var tabtab= "";
var nbwin=0

function Appel_Ajax(xpage) {
var param="page="+xpage;
new Ajax_request('listindividu.php',{method:'post',params:param,onSuccess:succAjax,onError:ErrorAjax,async:false});
}

function ErrorAjax(xhr) {
alert('error : status =' +xhr.status);
}

function succAjax(xhr) {
tabtab=xhr.responseText
}

function Eventbf(mydiv){
page[mydiv]=1;
Appel_Ajax(page[mydiv]);
RefreshGrid(mydiv,tabtab);
}

function Eventbp(mydiv){
page[mydiv]--;
Appel_Ajax(page[mydiv]);
RefreshGrid(mydiv,tabtab);
}

function Eventbn(mydiv){
page[mydiv]++;
Appel_Ajax(page[mydiv]);
RefreshGrid(mydiv,tabtab);
}

function Eventbl(mydiv){
page[mydiv]=-1;
Appel_Ajax(page[mydiv]);
RefreshGrid(mydiv,tabtab);
}

function ReturnTGrid(dparent){
var xdiv= 'mygrid' + ++nbdiv;
page[xdiv]=1;
Appel_Ajax(page[xdiv]);
var typegrid= { idgrid : xdiv , divparent : dparent ,
tabldata : tabtab,
url : 'mapage.php',
eventbf : function(){Eventbf(xdiv)},
eventbp : function(){Eventbp(xdiv)},
eventbn : function(){Eventbn(xdiv)},
eventbl : function(){Eventbl(xdiv)},
typeobj : "['label','label','label','label','label']",
gwith : 500
};
return typegrid;
}

function CreateNewWin(){
var windiv = "windiv" + ++nbwin;
new popUp(50 , 100 , 510 , 310 , windiv , "" , "white" , "black" , "10pt sans-serif" , "Fenetre test" , "#0F72BB" , "white" , "lightgrey", "#6DBAF3" , "black" , true , true , true , true , false , false , 'min.gif' , 'max.gif' , 'close.gif' , 'resize.gif');
var xx=ReturnTGrid(windiv+'_c');
CreateNewGrid(xx);
}




























et le code PHP




Voilou, faut pas grand chose pour faire du booooooo :D

a++



Messages postés
150
Date d'inscription
lundi 13 octobre 2003
Statut
Membre
Dernière intervention
21 décembre 2014

si, en fait c'est si on dépasse les bornes que ça se perd les pédales. genre si je clic sur >> et puis > ou bien << et <
les fenêtres c'est fun aussi ^^
Messages postés
150
Date d'inscription
lundi 13 octobre 2003
Statut
Membre
Dernière intervention
21 décembre 2014

c'est énorme ! je suis fan du javascript en fait :p

par contre c'est moi ou le bouton < ne marche pas ?
Afficher les 13 commentaires

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.