CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 14 09:13:47

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Trucs & Astuces

> TRANSFORMER UN TABLEAU JAVASCRIPT EN UN TABLEAU HTML

TRANSFORMER UN TABLEAU JAVASCRIPT EN UN TABLEAU HTML

Information sur la source

Note :

10,00 / 10

Catégorie :Trucs & Astuces Classé sous :table, tableau, matrice, array Niveau :Débutant Date de création :22/08/2007 Vu :17 864

Auteur : pifou25

Ecrire un message privé

Site perso

Ce membre participe au partage de revenus publicitaires

Commentaire sur cette source (12)

Ajouter un commentaire et/ou une note

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

Sources du même auteur

ANALYSER & RÉCUPÉRER LES VARIABLES DE L'URL

TRANSFORMER UN FLUX XML EN UNE TABLE HTML VIA JAVASCRIPT

Toutes les sources de pifou25

Sources de la même categorie

SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp

TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator

ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

COPIER DU TEXTE par m22001111

DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE par william voirol

Toutes les sources de la catégorie Trucs & Astuces

Sources en rapport avec celle ci

AFFICHAGE, ÉDITION GRAPHIQUE DE TABLEAUX par thebmxeur

TRAITEMENT POUR ADAPTER LA LARGEUR DES COLONNES ( DANS UN TA... par bultez

TRI DE TABLEAUX HTML par coucou747

DIVERSES FONCTIONS SIMPLES POUR LES TABLEAUX par Gorrk

TRAITEMENTS SUR LES TABLEAUX par bultez

Commentaires et avis

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

Commentaire de pierrot01 le 27/10/2009 22:25:45

Salut,
Je ne voudrais surtout pas avoir l'air bête, mais je n'arrive pas a le faire fonctionner.

Partie javascript :

        function CreateNewTab(){
        var tabtab=['ID','Name','autre1','autre2']['1','2','3','4'];
                var obj=document.getElementById('grid2');
                obj.appendChild(CreateTableArray(tabtab));
        }
Partie HTML :

<div id="grid2">
</div>
<input type="button" name="butfirst" value="<<" onclick="CreateNewTab();" />

Et il ne se passe rien :/

@+

Commentaire de pifou25 le 27/10/2009 22:40:32

erreur de débutant :p ... non j'avoue, j'ai pas vu de suite à la lecture, j'ai du le tester chez moi:

c'est la déclaration de ton tableau qui est mal faite, il faut utiliser new Array (et avec la majuscule à Array s'il vous plait!)
var tabtab = new Array(new Array('ID','Name','autre1','autre2'), new Array('1','2','3','4'));

Commentaire de pierrot01 le 28/10/2009 13:11:23

Salut,
Merci mille fois ;)
Réactivité digne d'une société de sevice performante ;):D

Mais, ca ne me satisfait pas :/

J'ai l'habitude de travailler en notation JSON, qui est bien plus lisible ;).
Et de plus, je suis en train d'écrire un frameworck et les appels au serveur me renvoi du JSON.

Donc, il y a juste une petite modif a faire à ta fonction pour qu'elle fonctionne avec la notation JSON.

Juste une ligne (la premiere) à ajouter a ta fonction.

// variable en notation JSON que me renvoi le serveur
var tabtab="[['ID','Nom','Prénom','Note'],['1','Dupont','Pierre','10'],['2','Dupuit','Francois','400'],['3','Durant','Christopha','500']]";

function CreateTableArray(val) {
    if(typeof val=='string'){val=eval('('+val+')');}
    // ............................. //
    // la suite et on ne change rien //
    // ............................. //
}

Et voilou, comme ca, ca fontionne et tout le monde est content.

Merci de m'accorder la permission d'utiliser tes quelques lignes de code dans mon frameworck ;)

@+

Commentaire de pifou25 le 28/10/2009 20:26:15

je t'en prie fais toi plaisir ;) j'avoue je connais pas du tout Json j'aurais pas trouvé.

pour la réactivité j'ai aucun mérite, je reçois un mail à chaque fois qu'on me met un commentaire. Halala, ça vaut bien une petite note tout ça non? :D

Commentaire de pierrot01 le 28/10/2009 21:15:11 10/10

Salut,
Vu que je vais utiliser ce bout de code, je ne peut que bien noter ;)
@+

Commentaire de pierrot01 le 08/11/2009 20:36:41

Salut ;)
Voila, j'ai transformé ton pti bou de code en grid :D
Je peaufine un peu tout ça, et je le post ;)
en attendant, regardes un peu ce que ça donne, et donnes moi ton avis ;)

http://safbiturbo.free.fr/grid/test3.html

tu peu ouvrir autant de grid ou de fenêtres que tu veux.
Pour info, la table comporte 1285 enregistrements.

@+

Commentaire de pierrot01 le 08/11/2009 20:42:21

Commentaire de pifou25 le 09/11/2009 21:12:07

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

par contre c'est moi ou le bouton < ne marche pas ?

Commentaire de pifou25 le 09/11/2009 21:13:50

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 ^^

Commentaire de pierrot01 le 09/11/2009 21:35:23

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 :

[code]
<script type="text/javascript">
    // 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);
}
</script>

</head>
<body>
<input type="button" name="but02" value="nouveau grid" onclick="var xx=ReturnTGrid('container'); CreateNewGrid(xx);" />
<input type="button" name="but02" value="nouveau grid dans une fenetre" onclick="CreateNewWin()" />
<div id="principale">
    <div id="container" style ="position: absolute; left: 100px;">
    </div>
</div>

<div id="truc">
</div>

</body>

</html>

[/code]

et le code PHP

[code]
<?php

include("connect.php");
//header("Content-Type: text/plain; charset=utf-8");
//$arr = new array; // ('nom'=>'schinko','prenom'=>'pi\u00e9rre','age'=>50);

//$arr['nom']="Schinko";
//$arr['prenom']="Pierre";
//$arr['age']=40;
// $buffer = "Texte\nBonjour la reponse est : CA MARCHE !!!!\n";
// $buffer .= "Voici les parametres que j'ai recu :\n";
//echo utf8_encode($arr);
$buffer="";
$parpage=30;
$page=$_POST['page'];
$sql="SELECT COUNT(*) FROM individu";
$countenreg=current(mysql_fetch_array(mysql_query($sql)));
$countpages=ceil($countenreg/$parpage);
if($page==-1){$page=$countpages;};
if($page > $countpages){$page=1;};
$debut=($page*$parpage)-$parpage;
$sql="SELECT id,nom,prenom,type,matricule FROM individu ORDER BY nom,prenom LIMIT $debut,$parpage";
// echo " count=$countpages page=$page  et sql = $sql <br>";
$res=mysql_query($sql);
$buffer="[[\"ID\",\"Nom\",\"Prenom\",\"Type\",\"Matricule\"],";
$bcl=0;
while($row=mysql_fetch_row($res)){
$buffer .= json_encode($row);
$buffer .= (++$bcl < $parpage) ? "," : "";
}
$buffer .= "]";
echo $buffer;
//echo json_encode($arr);
// utf8_encode(print_r($_POST));

?>

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

a++

[/code]

Commentaire de xzonz le 12/10/2011 19:39:06

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('<a href="'+$(this).attr('href')+'">'+'<img src="'+$(this).attr('href')+'"'+'style="height:100px">'+'</a>')
});
w=open("",'popup','width=800,height=400,toolbar=yes,scrollbars=yes,resizable=yes,');
w.document.write('<div id="Layer1" style="position:absolute;z-index:1; background-color: #000000; layer-background-color: #000000;"><br>');
w.document.write('<div align="center">');
w.document.write(tab);
w.document.write('</div>');
w.document.write("</BODY>");
w.document.close();
});

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é :<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 écrit un script permettant de créer un tableau HTML  depuis un array. ce script fonctionnement trè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 le morceau de code de mon script qui pose problèmepreview = new Array(   <?php   <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

Derniers Blogs

SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko

XNA IS DEAD! par richardc

TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice

[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio

TECHDAYS PARIS 2012 : CHUCK MORRIS N'A PAS PEUR DES MALWARES, CE SONT LES MALWARES QUI ONT PEUR DE CHUCK MORRIS par ROMELARD Fabrice

Forum

RE : MENU VERTICAL DéROULANT par lordmacrage

RE : REMPLACER UN SOUS CHAINE DANS UNE AUTRE par Renfield

REMPLACER UN SOUS CHAINE DANS UNE AUTRE par stealon

GOOGLE MAP PB ZINDEX MARKER par philou8

RE : AIDE SUR UN SCRIPT?? par NHenry

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

URGENT - Realisation d-un flux standard XML -NewsML- CAHIER DES CHARGES DISPONIBLE
Budget : 400€
Creation de newsletter sur une page Facebook
Budget : 400€
fichier d-export de site OS commerce ver plateforme logistique-CDC disponible
Budget : 1 200€

Logiciels

DocTranslate (V3.1.0.0)
DOCTRANSLATE (V3.1.0.0)

DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom...

Cliquez pour télécharger DocTranslate
Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System