AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2009 07 05 21:25:23
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 FLUX XML EN UNE TABLE HTML VIA JAVASCRIPT


Information sur la source

Catégorie :Trucs & Astuces Classé sous : xml, datawebservice, table, attribut, noeud Niveau : Débutant Date de création : 22/08/2007 Vu : 9 402
Auteur : pifou25 Site perso
Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Note :
Aucune note
Commentaire sur cette source (5)
Ajouter un commentaire et/ou une note

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

Commentaires et avis

signaler à un administrateur
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>

signaler à un administrateur
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....

signaler à un administrateur
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.

signaler à un administrateur
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+

signaler à un administrateur
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...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version


Adobe Flex Builder
Entre 607€ et 607€


Visiter le guide achat

Photothèque Nouveau !

Photo alphabet langue des sourdsPhoto pretty girls
Photo jeune fille plage 

Visiter la photothèque


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,530 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é.