Charger un tableau XML dans HTML

Version imprimable

Bonjour, bonsoir !

Voilà, j'ai deux fichiers XML qui contiennent chacun un catalogue de CD, comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
	<CD>
		<TITLE>--</TITLE>
		<ARTIST>--</ARTIST>
		<COUNTRY>--</COUNTRY>
		<COMPANY>--</COMPANY>
		<PRICE>--</PRICE>
		<YEAR>--</YEAR>
	</CD>
	<CD>
		<TITLE>--</TITLE>
		<ARTIST>--</ARTIST>
		<COUNTRY>--</COUNTRY>
		<COMPANY>--</COMPANY>
		<PRICE>--</PRICE>
		<YEAR>--</YEAR>
	</CD>
</CATALOG>

Je précise que ces deux fichiers n'ont pas le même nombre de CD.

Dans une page HTML, je veux pouvoir faire apparaître ces deux catalogues, à l'aide d'une liste déroulante. Voilà ce que j'ai dans ce fichier HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
 
<form name="formulaire">
	<select name="select">
		<option value="cd_catalog.xml">Catalogue 1</option>
		<option value="cd_catalog2.xml">Catalogue 2</option>
	</select>
	<input type="button" value="Regarder" onclick="verification()" />
	<input type="text" name="result" />
</form>
 
<script>        
        function verification()
        {
                formulaire.result.value = formulaire.select.value;
        
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET",formulaire.result.value,false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
 
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
  { 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");
 
}
</script>
 
</body>
</html>

Alors, ça marche, mais le problème, c'est que ça efface la page quand je charge le tableau.
Est ce qu'il y a moyen de contourner le problème ?

Je vous remercie !

14/05/2013, 20h22
sekaijin

c'est quoi ça ?

Code:

document.write

A+JYT
14/05/2013, 20h59
NoSmoking

Bonjour,

Citation:

Est ce qu'il y a moyen de contourner le problème ?

OUI et pour commencer ne pas utiliser document.write dont tu connais l'effet.

Il existe les méthodes de construction du DOM tel que createElement, createNodeText, appendChild, insertRow ou autre insertCell.
14/05/2013, 21h31
X260SH

Citation:

Il existe les méthodes de construction du DOM tel que createElement, createNodeText, appendChild, insertRow ou autre insertCell.

Laquelle serai la plus approprié, et comment l'utiliser ?

Comme tu traites des données tabulaire je dirais à priori toutes ;).
exemple simple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Création TABLE</title>
<style>
table td{
  border:1px solid red;
}
</style>
</head>
<body>
<div id="destination"></div>
<script>
// endroit on l'on va ajouter la TABLE
var oDest = document.getElementById('destination');
// Eléments manipulés
var oText, oCell, oRow, oTable = document.createElement('TABLE');
var i, nb = 10;
for (i=0; i <nb; i++){
  oRow  = oTable.insertRow();
  oCell = oRow.insertCell();
  oText = document.createTextNode( i);
  oCell.appendChild( oText);
}
// ajout TABLE créée
oDest.appendChild( oTable);
</script>
</body>
</html>

Je te remercie !

Mais, comment puis-je insérer deuxième colonne ?
[EDIT] J'ai un autre problème. Sans ajouter de deuxième colonne, mon code est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Création TABLE</title>
<style>
table td{
  border:1px solid red;
}
</style>
</head>
<body>
 
 
<form name="formulaire">
	<select name="select">
		<option value="cd_catalog">Catalogue 1</option>
		<option value="cd_catalog2">Catalogue 2</option>
	</select>
	<input type="button" value="Regarder" onclick="verification()" />
	<input type="text" name="result" />
</form>
 
 
<div id="destination"></div>
 
 
<script>
function verification()
	{
		formulaire.result.value = formulaire.select.value+".xml";
 
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.open("GET",formulaire.result.value,false);
	xmlhttp.send();
	xmlDoc=xmlhttp.responseXML; 
 
 
	// endroit on l'on va ajouter la TABLE
	var oDest = document.getElementById('destination');
	// Eléments manipulés
	var oText, oCell, oRow, oTable = document.createElement('TABLE');
	var x=xmlDoc.getElementsByTagName("CD");
	for (i=0;i<x.length;i++) {
	oRow  = oTable.insertRow();
	oCell = oRow.insertCell();
	oText = document.createTextNode("n°"+i+" "+x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
 
	oCell.appendChild( oText);
	}
	// ajout TABLE créée
	oDest.appendChild( oTable);
}
 
</script>
</body>
</html>

Ca marche bien. Mais quand on change de catalogue avec le select, le tableau se "colle" en dessous du premier, alors que j'aimerai qu'il le remplace.

Il te suffit de dupliquer l'insertion d'une cellule
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 for (i=0; i <nb; i++){ // création d'une ligne oRow = oTable.insertRow(); // 1st cellule oCell = oRow.insertCell(); oText = document.createTextNode( 'ligne ' +i +' colonne 1'); oCell.appendChild( oText); // 2nd cellule oCell = oRow.insertCell(); oText = document.createTextNode( 'ligne ' +i +' colonne 2'); oCell.appendChild( oText); } oDest.appendChild( oTable);
Concernant la deuxième partie il te suffit de vider l'élément destination de ses enfants avant injection de la nouvelle TABLE.
:faq: Comment supprimer tous les enfants d'un noeud en utilisant les méthodes DOM ?

16/05/2013, 08h06
X260SH

Merci, merci beaucoup !
J'ai cependant un dernière question, comment puis-je faire un colspan ?
16/05/2013, 18h46
NoSmoking
Citation:

...comment puis-je faire un colspan ?
Code:

1 2 oCell = oRow.insertCell(); oCell.setAttribute('colspan', 2);
16/05/2013, 19h35
X260SH

Parfait, je te remercie, et je met la discussion en Résolu ! Merci encore !
17/05/2013, 08h00
Bovino

Ou mieux, en manipulant directement les propriétés de l'objet JavaScript plutôt que ses attributs HTML :

Code:

oCell.colspan = 2;

;)