Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

TRANSFORMER UN TABLEAU JAVASCRIPT EN UN TABLEAU HTML


Information sur la source



Description

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

  • // 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;
  • }
// 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;
}

Commentaires et avis

signaler à un administrateur
Commentaire de vincen le 23/09/2008 18:14:25

Félicitations,

C'est génial de simplicité !!

J'ai cherché sur le net des idées, des solutions concernant les tables, mais c'est toujours très sophistiqué et plein d'options inutiles, de skins... qu'on passe un temps fou à déactiver. Alors que là c'est beau, c'est simple et rapide.

Vive le javascript.

Vincent

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Recherche dans un tableau js [ par dridri ] Bonjour,Voila j'ai une question qui m'embète pas mal. Je voudrais savoir s'il était possible de faire une recherche dans un tableau js contenant des d La porté d'un array en javascript [ par maxxcbenny ] Bonjour,Comment faire pour passer un tableau de type array dans une fonction en javascript ?Parce que voici ce que j'ai codé :&lt;script language="Jav Formulaire : Ajouter une ligne sans reload [ par coraziari ] Bonjour,Je réalise un formulaire de saisie de CV mais je galère un peu pour les expériences. En effet, pour ne pas "polluer" trop la page, j'ai mis un création dynamique d'un Tableau HTML depuis 1 array [ par durand2504 ] Bonjour, j'ai &#233;crit un script permettant de cr&#233;er un tableau HTML&nbsp; depuis un array. ce script fonctionnement tr&#232;s bien sous Bug avec array::length [ par Checker_Bobby ] Bonjour, je savais pas trop ou mettre la remarque suivante... J'ai constater un truc "bizarre" avec JavaScript qui m'a bien tordu l'esprit avant que j Création tableau javascript via php [ par Blacknight91titi ] Bonjour,J'ai ci dessous&nbsp;le morceau de code de mon script qui pose probl&#232;mepreview = new Array(&nbsp;&nbsp;&nbsp;&lt;?php&nbsp;&nbsp;&nbsp;<F table imbriqué ou multiniveau [ par ammoun1882 ] voila mon problème c que j'ai besoin de créer des tableau imbriqué l'une dans l'autre sachant que j'ai des données d'une base de donnée jusque là c bo affecter un document.forms.... à une variable [ par amelied54 ] Alors voila mon problème: j'ai une liste déroulante je voudrais affecter à ma variable ch1 l'option de la lise déroulante choisie, mais je sais pas si Trier tableau généré en js [ par way2web ] Bonjour,j'ai créé un script me permettant de générer un tableau html à partir de données stockées dans un array à 2 dimensions. L'affichage est correc 2 Select liés ensemble [ par folkene ] Voila je me suis un peu inspirer de ce que j'ai trouvé sur ce forum, je l'ai modifié mais je l'ai mal fait, resultat mes tableau se créent bien, mes f


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,998 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.