Création dynamique de zones de saisie dans un tableau ?

**Zebulon777** · 01/09/2014, 14h48

Bon, tout d'abord un grand merci pour ton aide.

Voici où j'en suis :

Code :

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
 
function CreationPage(P_Terrain) {
	WFichier = G_RepXML + G_TERRAIN + ".xml";
	$(document).ready(  
		function()
		{
			$.ajax( {
				type: "GET",
				url: WFichier,
				dataType: "xml",
				success: function(xml) 
				{
					$(xml).find('TERRAINS').each( 
						function() {  
							var WCode_Terrain = $(this).attr('code_terrain');
							var WNom_Terrain = $(this).attr('nom_terrain');
							// Application de la classe pour le nom de l'aérodrome.	
							var ObjCell = document.getElementById("Cell_Titre");
							ObjCell.className = "SousTitre";
							Cell_Titre.innerHTML = WNom_Terrain;
						}
					)
					$(xml).find('SECTION').each( 
						function() {  
							var WNom_Section = $(this).attr('nom_section');
							var WLib = $(this).find('LIB').text();
							var WElement = $(this).find('ELEMENT').text();
							var WType = $(this).find('TYPE').text();
							var WSize = $(this).find('SIZE').text();
							var WMax_Car = $(this).find('MAX_CAR').text();
							var WCellule = $(this).find('CELLULE').text();
							var WLig = $(this).find('LIG').text();
							var WCol = $(this).find('COL').text();
							var WInit = $(this).find('INIT').text();
							var WClasse = $(this).find('NOM_CLASSE').text();
// Création de l'élément
		var oInput = document.createElement(WElement);
		oInput.setAttribute('type', WType);
		oInput.setAttribute('size', WSize); // Taille de l'input à l'écran
		oInput.setAttribute('maxlength', WMax_Car);
		oInput.setAttribute('value', WInit);
		var ObjTab = document.getElementById("Tab_Stage");
		ObjTab.rows[WLig].cells[WCol].appendChild(oInput);
		var WObjCell = document.getElementById(WCellule);
		WObjCell.innerHTML = WLib;
 
alert(WLib + G_CrLf + WElement + G_CrLf + G_CrLf + WType);					
 
						}
					)
				}
			}
			);
		}
	);
}

Je récupère bien les attributs, mais ensuite, la partie "SECTION" ne fonctionne pas, ou mal.
Le "alert" affiche une concaténation des LIB et des ELEMENT ???
Et bien sur, les éléments ne sont pas créés.

Qu'est-ce que je fais mal ?

**NoSmoking** · 01/09/2014, 15h23

Vous avez sortie la grosse artillerie

Qu'est-ce que je fais mal ?

Sais tu réellement à quel résultat tu veux aboutir ?

Le "alert" affiche une concaténation des LIB et des ELEMENT ???

c'est le résultats de l'utilsation des +.

**SpaceFrog** · 01/09/2014, 15h24

Je ne sais pas exactement ce que tu cherches à récupérer au final ...
mais voici un exemple basé sur ton xml ...

attention dans l'exemple je fais un xmlparse, mais toi tu récupères direct un xml avec le dataType xml ...

http://jsfiddle.net/8vgw16k3/4/

**Zebulon777** · 02/09/2014, 08h09

En fait ce qu'on veux, c'est recréer dynamiquement des champs de saisie dans une page HTML à partir des informations contenu dans le fichier XML (à terme, il y en aura plusieurs).
Comme mis dans mon code, je récupère les infos et ensuite je créé les champs, enfin c'est ce que je veux faire, mais pour le moment, c'est pas concluant

.

(Ps : concernant le "Alert", je me suis mal exprimé : lorsque j'affiche par exemple LIB, il contient TOUS LES LIB de mon XLM dans la variable WLib, alors qu'il ne devrait en contenir qu'en seul à la fois)

@SpaceFrog : je ne comprends pas, à part le parse, c'est exactement ce que je fais dans mon code, non ?

Code :

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
 
function CreationPage(P_Terrain) {
	WFichier = G_RepXML + G_TERRAIN + ".xml";
	$(document).ready(  
		function()
		{
			$.ajax( {
				type: "GET",
				url: WFichier,
				dataType: "xml",
				success: function(xml) 
				{
					$(xml).find('TERRAINS').each( 
						function() {  
							var WCode_Terrain = $(this).attr('code_terrain');
							var WNom_Terrain = $(this).attr('nom_terrain');
							// Application de la classe pour le nom de l'aérodrome.	
							var ObjCell = document.getElementById("Cell_Titre");
							ObjCell.className = "SousTitre";
							Cell_Titre.innerHTML = WNom_Terrain;
						}
					)
					$(xml).find('SECTIONS').each( 
						function() {  
							var WNom_Section = $(this).attr('nom_section');
							var WLib = $(this).find('LIB').text();
							var WElement = $(this).find('ELEMENT').text();
							var WType = $(this).find('TYPE').text();
							var WSize = $(this).find('SIZE').text();
							var WMax_Car = $(this).find('MAX_CAR').text();
							var WCellule = $(this).find('CELLULE').text();
							var WLig = $(this).find('LIG').text();
							var WCol = $(this).find('COL').text();
							var WInit = $(this).find('INIT').text();
							var WClasse = $(this).find('NOM_CLASSE').text();
// Création de l'élément
		var oInput = document.createElement(WElement);
		oInput.setAttribute('type', WType);
		oInput.setAttribute('size', WSize); // Taille de l'input à l'écran
		oInput.setAttribute('maxlength', WMax_Car);
		oInput.setAttribute('value', WInit);
		var ObjTab = document.getElementById("Tab_Stage");
		ObjTab.rows[WLig].cells[WCol].appendChild(oInput);
		var WObjCell = document.getElementById(WCellule);
		WObjCell.innerHTML = WLib;
 
alert(WLib + G_CrLf + WElement + G_CrLf + G_CrLf + WType);					
 
						}
					)
				}
			}
			);
		}
	);
}

Voici ce que le "alert" donne :
Nom : xml01.png
Affichages : 128
Taille : 25,9 Ko

Comme vous pouvez le voir dans mon code, il faut ensuite créer les éléments trouvés dans le XML, or, par exemple, WElement contient "INPUTINPUTINPUTINPUTINPUTINPUTINPUTINPUTINPUTINPUT" au lieu d'un seul"INPUT" ! ? !

**SpaceFrog** · 02/09/2014, 09h19

Il suffit de faire la boucle sur les bonnes balises ...

Code :

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

1
2
 
$(this).find('SECTIONS ZONE_SAISIE')

De façon à ressortir un input pour chaque zone ...

http://jsfiddle.net/8vgw16k3/7/

**SpaceFrog** · 02/09/2014, 09h36

Pour aller un peu plus loin..
j'ai collé un input avec en value le contenu de la balise INPUT
http://jsfiddle.net/8vgw16k3/8/

**Zebulon777** · 02/09/2014, 10h46

Super, j'avance bien.

J'ai légèrement modifié le XML :

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
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version="1.0" encoding="utf-8"?>
<TERRAINS code_terrain="AAAA" nom_terrain="Terrain AAAA">
	<SECTIONS>
		<SECTION nom_section="Avions / Basés / VFR / Voyage" cell_section="LIG_SECTION_1">
			<ZONE_SAISIE>
				<LIB>Départs - Jour</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L1C1</CELLULE>
				<LIG>1</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>Départs - Nuit</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L2C1</CELLULE>
				<LIG>2</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
...
...
...

Mais le code ne fonctionne pas :

Code :

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
function CreationPage(P_Terrain) {
	WFichier = G_RepXML + G_TERRAIN + ".xml";
	$(document).ready(  
		function()
		{
			$.ajax( {
				type: "GET",
				url: WFichier,
				dataType: "xml",
				success: function(xml) 
				{
					$(xml).find('TERRAINS').each( 
						function() {  
							var WCode_Terrain = $(this).attr('code_terrain');
							var WNom_Terrain = $(this).attr('nom_terrain');
							// Application de la classe pour le nom de l'aérodrome.	
							var ObjCell = document.getElementById("Cell_Titre");
							ObjCell.className = "SousTitre";
							Cell_Titre.innerHTML = WNom_Terrain;
						}
					)
					$(xml).find('SECTIONS SECTION').each( 
						function() {  
							var WNom_Section = $(this).attr('nom_section');
							var WCell_Section = $(this).attr('cell_section');
							var ObjCell = document.getElementById(WCell_Section);
							ObjCell.className = "SousTitre";
							ObjCell.innerHTML = WNom_Section;
						}
					)
					$(xml).find('SECTIONS ZONE_SAISIE').each( 
						function() {  
							var WLib = $(this).find('LIB').text();
							var WElement = $(this).find('ELEMENT').text();
							var WType = $(this).find('TYPE').text();
							var WSize = $(this).find('SIZE').text();
							var WMax_Car = $(this).find('MAX_CAR').text();
							var WCellule = $(this).find('CELLULE').text();
							var WLig = $(this).find('LIG').text();
							var WCol = $(this).find('COL').text();
							var WInit = $(this).find('INIT').text();
							var WClasse = $(this).find('NOM_CLASSE').text();
// Création de l'élément
							if (WElement == "")
							{
							};
 
		var oInput = document.createElement(WElement);
		oInput.setAttribute('type', WType);
		oInput.setAttribute('size', WSize); // Taille de l'input à l'écran
		oInput.setAttribute('maxlength', WMax_Car);
		oInput.setAttribute('value', WInit);
		var ObjTab = document.getElementById("Tab_Stage");
		ObjTab.rows[WLig].cells[WCol].appendChild(oInput);
		var WObjCell = document.getElementById(WCellule);
		WObjCell.innerHTML = WLib;

Je n'arrive pas à afficher la section, ni à créer les inputs avec leurs libellés...
Je ne vois pas ce qui cloche.

**SpaceFrog** · 02/09/2014, 10h50

Peux tu recoller un xml plus complet, que je puisse tester ?

**Zebulon777** · 02/09/2014, 10h55

Voila :

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
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
<?xml version="1.0" encoding="utf-8"?>
<TERRAINS code_terrain="LFPN" nom_terrain="Toussus-Le-Noble">
	<SECTIONS>
		<SECTION nom_section="Avions / Basés / VFR / Voyage" cell_section="LIG_SECTION_1">
			<ZONE_SAISIE>
				<LIB>Départs - Jour</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L1C1</CELLULE>
				<LIG>1</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>Départs - Nuit</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L2C1</CELLULE>
				<LIG>2</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>Arrivées - Jour</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L3C1</CELLULE>
				<LIG>3</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>Arrivées - Nuit</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L4C1</CELLULE>
				<LIG>4</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
		</SECTION>
		<SECTION nom_section="Avions / Basés / VFR / Aérodrome" cell_section="LIG_SECTION_2">
			<ZONE_SAISIE>
				<LIB>LOC. - Jour</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L6C1</CELLULE>
				<LIG>6</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>LOC. - Nuit</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L7C1</CELLULE>
				<LIG>7</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>TDP - Départs - Jour</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L8C1</CELLULE>
				<LIG>8</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>TDP - Départs - Nuit</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L9C1</CELLULE>
				<LIG>9</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>TDP - T and GO - Jour</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L10C1</CELLULE>
				<LIG>10</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
			<ZONE_SAISIE>
				<LIB>TDP - T and GO - Nuit</LIB>
				<ELEMENT>INPUT</ELEMENT>
				<TYPE>NUM</TYPE>
				<SIZE>5</SIZE>
				<MAX_CAR>3</MAX_CAR>
				<CELLULE>L11C1</CELLULE>
				<LIG>11</LIG>
				<COL>1</COL>
				<VAL_INIT>0</VAL_INIT>
				<NOM_CLASS></NOM_CLASS>
			</ZONE_SAISIE>
		</SECTION>
	</SECTIONS>
</TERRAINS>

Et encore une fois, merci pour ton aide, plus que précieuse, tu n'imagines pas

**Zebulon777** · 02/09/2014, 13h28

Bon, j'ai pas mal avancé.

Voici mon code :

Code :

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
function CreationPage(P_Terrain) {
	WFichier = G_RepXML + G_TERRAIN + ".xml";
	$(document).ready(  
		function()
		{
			$.ajax( {
				type: "GET",
				url: WFichier,
				dataType: "xml",
				success: function(xml) 
				{
					$(xml).find('TERRAINS').each( 
						function() {  
							var WCode_Terrain = $(this).attr('code_terrain');
							var WNom_Terrain = $(this).attr('nom_terrain');
							// Application de la classe pour le nom de l'aérodrome.	
							var ObjCell = document.getElementById("Cell_Titre");
							ObjCell.className = "SousTitre";
							Cell_Titre.innerHTML = WNom_Terrain;
						}
					)
					$(xml).find('SECTIONS SECTION').each( 
						function() {  
							var WNom_Section = $(this).attr('nom_section');
							var WCell_Section = $(this).attr('cell_section');
//							var ObjCell = document.getElementById(WCell_Section);
//							ObjCell.className = "Section";
//							ObjCell.innerHTML = WNom_Section;
							// Ajout d'un ligne à la table Tab_Stage
							var newRow  = document.getElementById('Tab_Stage').insertRow(-1);
							newRow.className = "LigneTitre";
							var newCell = newRow.insertCell(0);
							newCell.className = "Cellule1";
							var newCell = newRow.insertCell(1);
							newCell.className = "Cellule2";
							newCell.className = "Titre";
							newCell.innerHTML = WNom_Section;
							var newCell = newRow.insertCell(2);
							newCell.className = "Cellule1";
						}
					)
 
alert("APRES SECTION");					
 
					$(xml).find('SECTIONS ZONE_SAISIE').each( 
						function() {  
							var WLib = $(this).find('LIB').text();
							var WElement = $(this).find('ELEMENT').text();
							var WType = $(this).find('TYPE').text();
							var WSize = $(this).find('SIZE').text();
							var WMax_Car = $(this).find('MAX_CAR').text();
							var WCellule = $(this).find('CELLULE').text();
							var WLig = $(this).find('LIG').text();
							var WCol = $(this).find('COL').text();
							var WInit = $(this).find('INIT').text();
							var WClasse = $(this).find('NOM_CLASSE').text();
// Création de l'élément
							if (WElement == "")
							{
							};
 
alert("APRES ZONE_SAISIE");					
 
		var oInput = document.createElement(WElement);
		oInput.setAttribute('type', WType);
		oInput.setAttribute('size', WSize); // Taille de l'input à l'écran
		oInput.setAttribute('maxlength', WMax_Car);
		oInput.setAttribute('value', WInit);
		var ObjTab = document.getElementById("Tab_Stage");
		ObjTab.rows[WLig].cells[WCol].appendChild(oInput);
		var WObjCell = document.getElementById(WCellule);
		WObjCell.innerHTML = WLib;
 
alert("après");					
 
 
						}
					)
				}
			}
			);
		}
	);
}

Mon problème est que les lignes "SECTION" se créées les unes après les autres alors que je voudrai que les lignes "ZONE_SAISIE" soient positionnées juste après la SECTION à laquelle elles appartiennent.
Comment faire ?

(Ps : Dans mon code, il n'y a pas encore la création des lignes "ZONE_SAISIE", je suis entrain de le faire.)

**SpaceFrog** · 02/09/2014, 13h31

faut cibler par niveau de balise et faire le each sur les enfants

je pense que ce que tu cherches à faire se rapproche de cette version:

http://jsfiddle.net/8vgw16k3/10/

**Zebulon777** · 02/09/2014, 14h15

Bon, je ne sais pas ce que j'ai foutu, mais ça ne fonctionne plus du tout : pas de table, pas de ligne, rien....
Au secours...

Code :

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
 
$(this).find('SECTIONS').find('SECTION').each(
	function() {  
		var WNom_Section = $(this).attr('nom_section');
		var WCell_Section = $(this).attr('cell_section');
		// Ajout d'un ligne à la table Tab_Stage
		var ObjTab = document.createElement("table");
		ObjTab.style.border = "1px solid black";
		newRow = ObjTab.insertRow();
		var newCell = newRow.insertCell(0);
		newCell.className = "Cellule_50px";
		var newCell = newRow.insertCell(1);
		newCell.className = "Section";
		newCell.className = "Cellule_100";
		newCell.innerHTML = WNom_Section;
		var newCell = newRow.insertCell(2);
		newCell.className = "Cellule_50px";
	}
)

**Zebulon777** · 02/09/2014, 14h31

Oups... j'ai trouvé "this" à la place de "xml"... Désolé

Petit HS car je suis sur que vous allez me dépatouillé ça en moins de 2 : dans ce code, pourquoi la première et la dernière cellule n'apparaissent pas ?

Code :

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
 
$(xml).find('SECTIONS').find('SECTION').each(
	function() {  
		var WNom_Section = $(this).attr('nom_section');
		var WCell_Section = $(this).attr('cell_section');
		var ObjTab = document.createElement("table");
		ObjTab.style.width='100%';
		ObjTab.style.border = "1px solid black";
		newRow = ObjTab.insertRow();
		var newCell = newRow.insertCell(0);
		newCell.className = "Cellule_50px";
		newCell.innerHTML = "&nbsp;";
		var newCell = newRow.insertCell(1);
		newCell.className = "Section";
		newCell.className = "Cellule_100 Section";
		newCell.innerHTML = WNom_Section;
		var newCell = newRow.insertCell(2);
		newCell.className = "Cellule_50px";
		newCell.innerHTML = "&nbsp;";
		document.body.appendChild(ObjTab);
	}
)

**SpaceFrog** · 02/09/2014, 14h32

Une autre approche de la création du tableau
http://jsfiddle.net/8vgw16k3/11/

**Zebulon777** · 02/09/2014, 14h55

Ho YES ! C'est presque ça.

Code :

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
 
function CreationPage(P_Terrain) {
	WFichier = G_RepXML + G_TERRAIN + ".xml";
	$(document).ready(  
		function()
		{
			$.ajax( {
				type: "GET",
				url: WFichier,
				dataType: "xml",
				success: function(xml) 
				{
					$(xml).find('TERRAINS').each( 
						function() {  
							var WCode_Terrain = $(this).attr('code_terrain');
							var WNom_Terrain = $(this).attr('nom_terrain');
							// Application de la classe pour le nom de l'aérodrome.	
							var ObjCell = document.getElementById("Cell_Titre");
							ObjCell.className = "SousTitre";
							Cell_Titre.innerHTML = WNom_Terrain;
						}
					)
					$(xml).find('SECTIONS').find('SECTION').each(
						function() {  
							var WNom_Section = $(this).attr('nom_section');
							var WCell_Section = $(this).attr('cell_section');
							// Ajout d'un ligne à la table Tab_Stage
							$('#Tab_Stage').append($('<tr><td colspan="2" >'+WNom_Section+"</td></tr>"));
						}
					)
					$(xml).find('ZONE_SAISIE').each( 
						function() {  
							var WLib = $(this).find('LIB').text();
							var WElement = $(this).find('ELEMENT').text();
							var WType = $(this).find('TYPE').text();
							var WSize = $(this).find('SIZE').text();
							var WMax_Car = $(this).find('MAX_CAR').text();
							var WCellule = $(this).find('CELLULE').text();
							var WLig = $(this).find('LIG').text();
							var WCol = $(this).find('COL').text();
							var WInit = $(this).find('INIT').text();
							var WClasse = $(this).find('NOM_CLASSE').text();
							$('#Tab_Stage').append( $('<tr><td>'+WLib + '</td/><td><input value="'+WElement+'" /></td>'));							
						}
					)
				}
			}
			);
		}
	);
}

Mais là, j'ai toujours les 2 sections PUIS les tous les INPUTS, alors qu'il y en a qui devraient être intercalés entre les 2 sections.

De plus, il faudrait avoir une ligne de ce type :
DEPARTS JOUR - INPUT / DEPARTS NUIT - INPUT
ARRIVEES JOUR - INPUT / ARRIVEES NUIT - INPUT
ce qui permettrrai de réduire le nombre de lignes ?

**SpaceFrog** · 02/09/2014, 15h00

Je pense qu'il serait plus simple que tu me fasse un croquis du résulta souhaité

garde en mémoire qu'il parse le xml dans l'ordre ...

**Zebulon777** · 02/09/2014, 15h08

Voila, ça pourrait donner un truc comme ça :

Nom : Xlm02.png
Affichages : 120
Taille : 6,4 Ko

**SpaceFrog** · 02/09/2014, 15h31

voici une façon de faire :

Je choppe les SECTION paires et je construis la ligne avec $(this) puis $(this).next('SECTION:eq(0)') pour les chopper par paires...

http://jsfiddle.net/8vgw16k3/12/

Il y a bien entendu d'autre méthodes possibles

attention dans l'exemple je ne récupère que

Code :

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

1
2
3
4
var WLib1 = $(this).find('LIB').text();
var WLib2 = $(this).next('ZONE_SAISIE:eq(0)').find('LIB').text();
var WElement1 = $(this).find('ELEMENT').text();
var wElement2 = $(this).next('ZONE_SAISIE:eq(0)').find('ELEMENT').text();

il faudra en faire de même pour les autres

[edit]
les :eq(0) sont superflus ...

Code :

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

                var WLib2 = $(this).next('ZONE_SAISIE').find('LIB').text();

est suffisant
[/edit]

avec la police bold
http://jsfiddle.net/8vgw16k3/13/

**Zebulon777** · 03/09/2014, 08h25

Bon, je crois que je commence à bien comprendre le truc.
Par contre, ce qui m'interpelle c'est que tu mémorises 2 instances (LIB1, LIB2, etc...) mais s'il y en a plus ?

Je t'ai donné un XML simplifié, mais en fait, il n'y a pas de limite au nombre de "SECTION" et au nombre de "ZONE_SAISIE" ; est-ce que le code fonctionnera aussi ?

Si oui, alors je veux bien un petite explication, car, là, je n'ai pas compris

**SpaceFrog** · 03/09/2014, 08h35

A priori je dirais que oui cela fonctionnera

vu que je boucle sur les balises
puis au niveau des SECTION je boucle sur les balises d'index pair et je mémorise la balise paire LIB1 et la suivante impaire LIB2 afin de les afficher en ligne
Donc le système ne fonctionnera que si les balises SECTION fonctionnent par paires

Création dynamique de zones de saisie dans un tableau ?

jQuery

Discussions similaires

Partager

Partager