begin process at 2010 02 10 08:18:01
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > TRANSFORMER UN FLUX XML EN UNE TABLE HTML VIA JAVASCRIPT

TRANSFORMER UN FLUX XML EN UNE TABLE HTML VIA JAVASCRIPT



 Description

Sur le modèle de ma source précédente (qui transforme une matrice JS en TABLE HTML) voici une fonction qui se "nourrit" d'un objet XML pour créer la TABLE!
Le flux XML doit être obtenu au préalable: HTTPrequest, Datawebservice, à vous le choix pour obtenir un objet XML au sens javascript qui contient les données à afficher. XMLnode est cet objet.
NodeName contient le nom des noeuds "enfants" à récupérer
attrName est un tableau (array) des attributs à afficher dans la table, ce tableau remplis également l'entête de la TABLE.
Le résultat est un objet TABLE à ajouter dans votre page à l'aide de appendChild (comme ma source précédente donc).

La fonction ValeurAttribut permet de récupérer un attribut XML à la fois pour IE et FF.

Source

  • // génère un tableau HTML sur la base d'un noeud XML, le nom des noeuds qu'on veut extraire,
  • // et la liste des attributs contenant les données
  • // XMLnode : objet XML noeud à parcourir
  • // NodeName : nom des noeuds à rechercher
  • // attrName = array des noms d'attributs à rechercher
  • // return : objet table à ajouter (appendChild)
  • function CreateTableFromXMl(XMLnode, NodeName, attrName) {
  • var elts = XMLnode.getElementsByTagName(NodeName);
  • if (!elts) return; // rien si vide
  • 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=attrName.length;
  • for (var j = 0; j < n; j++) {
  • var td = document.createElement("TH");
  • td.appendChild(document.createTextNode(attrName[j]));
  • tr.appendChild(td);
  • }
  • thead.appendChild(tr);
  • m = elts.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(ValeurAttribut(elts[i], attrName[j])));
  • tr.appendChild(td);
  • }
  • tbody.appendChild(tr);
  • }
  • tbl.appendChild(thead);
  • tbl.appendChild(tfoot);
  • tbl.appendChild(tbody);
  • return tbl;
  • }
  • function ValeurAttribut(noeud, attribut) {
  • if (!noeud) return "";
  • if ((!attribut) || (attribut=="")) return "";
  • if (noeud.getAttribute(attribut)) return noeud.getAttribute(attribut);
  • if (noeud.attributes[attribut]) return noeud.attributes[attribut].value;
  • return "";
  • } 
// génère un tableau HTML sur la base d'un noeud XML, le nom des noeuds qu'on veut extraire, 
// et la liste des attributs contenant les données
// XMLnode : objet XML noeud à parcourir
// NodeName : nom des noeuds à rechercher
// attrName = array des noms d'attributs à rechercher
// return : objet table à ajouter (appendChild)
function CreateTableFromXMl(XMLnode, NodeName, attrName) {
	var elts = XMLnode.getElementsByTagName(NodeName);
	if (!elts) return; // rien si vide
	
	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=attrName.length;
	for (var j = 0; j < n; j++) {
		var td = document.createElement("TH");
		td.appendChild(document.createTextNode(attrName[j]));
		tr.appendChild(td);
	}
	thead.appendChild(tr);
	
	m = elts.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(ValeurAttribut(elts[i], attrName[j])));
			tr.appendChild(td);
		}
		tbody.appendChild(tr);	
	}
	
	tbl.appendChild(thead);
	tbl.appendChild(tfoot);
	tbl.appendChild(tbody);
	return tbl;
}

function ValeurAttribut(noeud, attribut) {
  if (!noeud) return "";
  if ((!attribut) || (attribut=="")) return "";
  if (noeud.getAttribute(attribut)) return noeud.getAttribute(attribut);
  if (noeud.attributes[attribut]) return noeud.attributes[attribut].value;
  return "";
}



 Sources du même auteur

ANALYSER & RÉCUPÉRER LES VARIABLES DE L'URL
TRANSFORMER UN TABLEAU JAVASCRIPT EN UN TABLEAU HTML
Toutes les sources de pifou25

 Sources de la même categorie

VERIFIER UNE ADRESSE E-MAIL par elmersaid
DÉTECTER LES VISITEURS EN PROVENANCE DE GOOGLE par elmersaid
EMPÊCHER QUE VOTRE PAGE NE S'AFFICHE PAS DANS UN CADRE (IFRA... par elmersaid
ROLLOVER SUR LES BARRES DE SCROLL par elmersaid
OUTIL DE SÉLECTION par jdmcreator
Toutes les sources de la catégorie Trucs & Astuces

 Sources en rapport avec celle ci

Source avec Zip FAIRE UN CV EN HTML VIA XML ET DU XSL par antour
Source avec Zip Source avec une capture TABLEAU GÉNÉRÉ ET TRIÉ PAR LE CLIENT par Klephte
Source avec Zip Source avec une capture ALBUM PHOTO AVEC PARTIE ADMINISTRATION - PHP + AJAX + XML par tinokoxx
AJOUT NOEUDS + OBJETS + LIENS (AJOUTUBE V1.1) par xloadx
Source avec Zip Source avec une capture ENIGMES, CASSE-TÊTES À RÉSOUDRE par Bul3

Commentaires et avis

Commentaire de sim38 le 18/11/2008 23:27:06

Bonjour,
Je galère... Je n'arrive rien à afficher... voici ma page html si vous avez des idées :

<html>
<head>
    <title>Tableau depuis xml</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- <script type="text/javascript" src="table_depuis_xml.js"></script> -->

<script type="text/javascript">
AfficheDocXML();
// génère un tableau HTML sur la base d'un noeud XML, le nom des noeuds qu'on veut extraire,
// et la liste des attributs contenant les données
function AfficheDocXML(){
if (document.implementation && document.implementation.createDocument) {
// déclaration pour Mozilla et FF
docXml = document.implementation.createDocument('', '', null);
document.write ("Firefox");

}
else if (window.ActiveXObject){
// déclaration pour IE
docXml = new ActiveXObject("Microsoft.XMLDOM");
document.write ("IE");
}
else {

alert('Votre navigateur ne saurait pas éxécuter ce script.');

}

XMLnode = docXml.load("catalogue.xml");
NodeName = 'Name';
attrName = '';

// XMLnode : objet XML noeud à parcourir
// NodeName : nom des noeuds à rechercher
// attrName = array des noms d'attributs à rechercher
// return : objet table à ajouter (appendChild)

var elts = XMLnode.getElementsByTagName(NodeName);
if (!elts){document.write ("pas de name");}  return; // rien si vide

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=attrName.length;
for (var j = 0; j < 100; j++) {
var td = document.createElement("TH");
td.appendChild(document.createTextNode(attrName[j]));
tr.appendChild(td);
}
thead.appendChild(tr);

//m = elts.length;
for(var i = 1; i < 200; i++){
var tr = document.createElement("TR");
for(var j = 0; j < n ;j++){
var td=document.createElement("TD");
td.appendChild(document.createTextNode(ValeurAttribut(elts[i], attrName[j])));
tr.appendChild(td);
}
tbody.appendChild(tr);
}

tbl.appendChild(thead);
tbl.appendChild(tfoot);
tbl.appendChild(tbody);
return tbl;
}

}

function ValeurAttribut(noeud, attribut) {
if (!noeud) return "";
if ((!attribut) || (attribut=="")) return "";
if (noeud.getAttribute(attribut)) return noeud.getAttribute(attribut);
if (noeud.attributes[attribut]) return noeud.attributes[attribut].value;
return "";
}


</script>
</head>

<body>

</body>
</html>

Commentaire de fs074995 le 20/11/2008 12:26:59

J'ai le même problème
je pense que le chargement du fichier .xml via
XMLnode = docXml.load("xxxx.xml"); n'est pas bon.
Mais pourquoi?
un document.write(XMLnode); donne simplement true
et firebug dit que
XMLnode.getElementsByTagName(NodeName) n'est pas un fonction!!!
Je nage....

Commentaire de pifou25 le 20/11/2008 21:52:43

je ne sais plus, il faudrait vérifier, je crois que la fonction ne s'applique pas sur le résultat httprequest mais sur le 1er noeud XML reçu. il y a toujours qu'un seul noeud unique en XML à la racine, c'est celui la.

Commentaire de sim38 le 20/11/2008 23:16:52

Personnellement j'ai trouvé une autre solution qui me convient plus. En utilisant un fichier xml et un fichier xslt j'arrive à afficher mon fichier xml (flux rss) comme une page html.
A+

Commentaire de pifou25 le 21/11/2008 11:14:42

ha! ça c'est très bon comme solution ^^ et tu arrive à modifier juste une partie de page, un tableau? ça m'intéresse :)

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

stocker objet javascript dans noeud DOM [ par Guillemouze ] salut a tous.J'ai plusieurs solutions possibles a mon problème, mais je ne sais pas si elles sont faisables en javascript.Alors voila l'histoire : j'a Vérifier si une date comprise entre deux autres [ par enibib ] Bonjour voici mon problème je voudrais saisir une date dans une zone de texte html et la comparer à deux autres dates récupéré sur ma table mysql pour Javascript pour gadget windows [ par alcapone29 ] Bonjour tout le monde,Voila j'ai quelques soucis avec un code Javascript pour mon gadget windows, donc je vous donne un peu le topo :- Dans un formula widget+xml [ par pandouta08 ] bonjour j'ai un fichier xml généré avec un code php à partir d'une base de donnée .je voudrais savoir comment je peux charger dans le widget ce fichie extraire donnée d'un fichier XML et Google AJAX APIs [ par zamubudio ] Hello, Je debute en prog HTML et j'essaye d'afficher les données contenues dans un fichier XML, en utilisant les fonctions déja creer par Google AJAX XML probleme de lien... [ par SHIBALBAH ] Bonjour à tous,(je précise que je suis novice dans la création de site, j'utilise le logiciel flash)J'ai crée un menu en flash pour un site développé Inserer table de poker sur une page html ?? [ par jeje1234 ] Bonjour, je voudrai savoir si il est possible d'insérer sur une page html une table de poker sur laquelle il serai possible de jouer avec mes copain ? récuperer les données d'un fichier XML dans une zone de saisie [ par fabricioliking ] bonjoursVoila j'ai besoin d'un tout petit coup de patte, je récupére les données d'un fichier xml, j'arrive à les afficher par le bied d' "alert" mais remplir mon fichier xml pour ensuite l'afficher dans mon formulaire [ par fabricioliking ] Re bonjour, me revoila encore pour mes petites contines en ajax. Voila j'arrive via mon code à afficher par le bied d'un alert le contenue d'un fichie Récupérer plusieurs lignes qui ont le même nom en JS à partir d'un fichier XML [ par mastertom ] Bonjour,Je génère un fichier xml grâce à un fichier php :   </s


Nos sponsors


Sondage...

Comparez les prix


Archos 5 (250 Go)
Entre 440€ et 440€

Visiter le guide achat

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

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,905 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)