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.

**NoSmoking** · 15/05/2013, 18h53

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

Code :

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

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.

Comment supprimer tous les enfants d'un noeud en utilisant les méthodes DOM ?

**X260SH** · 16/05/2013, 08h06

Merci, merci beaucoup !
J'ai cependant un dernière question, comment puis-je faire un colspan ?

**NoSmoking** · 16/05/2013, 18h46

...comment puis-je faire un colspan ?

Code :

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

1
2
oCell = oRow.insertCell();
oCell.setAttribute('colspan', 2);

**X260SH** · 16/05/2013, 19h35

Parfait, je te remercie, et je met la discussion en Résolu ! Merci encore !

**Bovino** · 17/05/2013, 08h00

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

Code :

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

oCell.colspan = 2;

Charger un tableau XML dans HTML

JavaScript

Discussions similaires

Partager

Partager