begin process at 2010 03 21 12:19:52
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Trucs & Astuces

 > TRANSFORMER UN TABLEAU JAVASCRIPT EN UN TABLEAU HTML

TRANSFORMER UN TABLEAU JAVASCRIPT EN UN TABLEAU HTML


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

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

Auteur : pifou25

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (11)
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

 Sources de la même categorie

HTML_ENTITIES_DECODE par zen69
ACCÈS À LA MÉTHODE SETATTRIBUTE('STYLE','') SOUS IE6 par masternico
OUTIL DE SÉLECTION par jdmcreator
Source avec Zip SIMPLIFIER LA CREATION DYNAMIQUE D'ELEMENT HTML par kazma
DÉTECTER SI CSS EST ACTIVÉ par jdmcreator

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture AFFICHAGE, ÉDITION GRAPHIQUE DE TABLEAUX par thebmxeur
Source avec Zip Source avec une capture TRAITEMENT POUR ADAPTER LA LARGEUR DES COLONNES ( DANS UN TA... par bultez
Source avec Zip TRI DE TABLEAUX HTML par coucou747
Source avec Zip DIVERSES FONCTIONS SIMPLES POUR LES TABLEAUX par Gorrk
Source avec Zip 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

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












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

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,718 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales