Transformer un flux xml en une table html via javascript
Soyez le premier à donner votre avis sur cette source.
Snippet vu 16 720 fois - Téléchargée 16 fois
Contenu du snippet
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.
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 / Exemple :
// 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 "";
}
A voir également
- Xml to table html
- Flux javascript - Meilleures réponses
- Createthead - Meilleures réponses
- Xml to html !? ✓ - Forum - C# / .NET
- Table html php - Conseils pratiques - PHP
- Deserialize xml to object c# - Conseils pratiques - C# / .NET
- Xml to pdf java - Forum - Java
- Xml to dataset vb.net - Forum - VB.NET
A+
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....
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>
</html>
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.