Charger un tableau XML dans HTML

**X260SH** · 14/05/2013, 19h39

Bonjour, bonsoir !

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

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**sekaijin** · 14/05/2013, 20h22

c'est quoi ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.write

A+JYT

**NoSmoking** · 14/05/2013, 20h59

Bonjour,

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.

**X260SH** · 14/05/2013, 21h31

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 ?

**NoSmoking** · 14/05/2013, 22h01

Comme tu traites des données tabulaire je dirais à priori toutes

.
exemple simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**X260SH** · 15/05/2013, 15h54

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 HTML et JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Charger un tableau XML dans HTML

JavaScript

Vue hybride

Discussions similaires

Partager

Partager