AccueilCodesTutorielsForumsEmploiLivresConnexion

  • 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 01 10 01:43:33
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 : 8 207
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

prob avec Javascipt et accssoirement xml [ par Thepp ] Mon probl est 2 niveaux- je dispose d'un fichier xml et celui-ci ne comporte pas de rfrence un fichier Xsl (masque d'affichage), je voudrais trouver couleur du texte d'une cellule ou la couleur du fond d'une cellule d'une table [ par rabdane ] J'aimerais avoir un javascript qui change la couleur du texte d'une cellule ou la couleur du fond d'une cellule d'une table appelé TABLE1.cette table modif CLASS et attribut en dynamique ? [ par McPeter ] Salutquelqu'un aurait une idée pour attribuer un valign="middle" en dynamique sous JavaScriptje sais le faire pour align="center" mais je sèche pour l modification de l'attribut style en js avec netscape [ par tilla ] Bonjour,Je souhaite faire un roll-over textuel en changeant l'attribut style.display de la balise p.Pas de problème avec ie (évidemment)... mais impos probleme d'attribut/proprieté [ par wonesek ] bonjour tout le monde. Je convertis actuellement tous mes scripts pour qu'ils soient compatible avec DOM2 DOM3 et travaillant sur IE d'habitude je sui Je souhaiterais modifier la valeur de l'attribut class sur une balise TD avec Netscape 4.7 [ par zizou100679 ] Je souhaiterais modifier la valeur de l'attribut class sur une balise TD avec Netscape 4.7Voici mon code qui permet de definir un evenement onclick po Remplacer une table par un autre... [ par mancott ] Je voudrais a l'aide d'un hyperlien a l'interieur d'une table remplacer celle ci (en clickant celui ci)par une autre table possedant un hyperlien de r Dynamic anchor [ par mancott ] Voici, Je dois afficher plusieurs table dans une page .jsp mais voila que les tables ne se retrouve pas toujours la...donc parfois 3 tables...parfois Tri d'une table en fonction du click sur une colonne [ par manutu ] salut a tousj ai un problème. J'ai une table avec plusieurs colonnes. Je dois trier la table par défaut sur la premiere et ensuite sur la colonne sur requete [ par mikedimoi ] Salut!Je debute en SQL.Celle ci contient une table nommée "lp3".Dans ma "page2.php", il y a plus de 60 liens. J'essaie donc de faire appel à ma table


Nos sponsors

Sondage...

CalendriCode

Janvier 2009
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Consulter la suite du CalendriCode

Téléchargements

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


Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, 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,484 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é.