Positionnement en AJAX / JQuery

Version imprimable

1 pièce(s) jointe(s)

Salut tout le monde,

j'ai un problème sioux en JQuery.

Je vous pose le problème : je lis le contenu d'un fichier XML et je lis 2 noeuds en même temps.

Voici une partie de mon fichier XML

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
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
<CAPA>
	<MATRICE>
		<SECTION nom_section="Première section">
			<CELLULE nom_cellule="C_DATE_1"> <!--NE JAMAIS MODIFIER-->
				<NAME>C_DATE_1</NAME> <!--NOM DE LA CELLULE-->
				<LIB>Date : </LIB>
				<ELEMENT>DATE</ELEMENT> <!--Type de champs à créer -->
				<TYPE></TYPE> <!--Type de caractères autorisés en cas de champs INPUT-->
				<SIZE></SIZE> <!--Taille du champs en cas de champs INPUT-->
				<MAX_CAR></MAX_CAR> <!--Nombre de caractères autorisée en cas de champs INPUT-->
				<CADRAGE>CENTER</CADRAGE> <!--Cadrage horizontal de la cellule : LEFT, RIGHT, CENTER-->
				<CADRAGE_V>middle</CADRAGE_V> <!--Cadrage vertical de la cellule : BOTTOM, TOP, MIDDLE-->
				<VAL_INIT></VAL_INIT> <!--Valeur par défaut, si besoin; Mettre le nombre de jours de décallage : 1, -1, -2, etc -->
				<VAL_COUL_VERT></VAL_COUL_VERT> <!--Valeur limite pour affichage fond champs en vert (vide=coulmeur par défaut)-->
				<VAL_COUL_ORANGE></VAL_COUL_ORANGE> <!--Valeur limite pour affichage fond champs en orange (vide=coulmeur par défaut)-->
				<VAL_COUL_ROUGE></VAL_COUL_ROUGE> <!--Valeur limite pour affichage fond champs en rouge (vide=coulmeur par défaut)-->
				<FICHIER></FICHIER> <!--Nom du fichier à charger sans extention et sans date "NomFic_" et pas "NomFic_JJMMAAAA.TXT"-->
				<FORMAT_NON_FIC></FORMAT_NON_FIC> <!--Voir commentaire au début-->
				<EXTENSION></EXTENSION> <!--extension du fichier à charger (txt, csv, etc). QUE DES FICHIERS TEXTE-->
				<SEPARATEUR></SEPARATEUR> <!--Définit le séparateur utilisé dans le fichier : NE JAMAIS UTILISER ' ' ou TAB-->
				<LIG_FIC></LIG_FIC> <!--Définit le numéro de ligne pour récupérer la valeur dans le fichier-->
				<COL_FIC></COL_FIC> <!--Définit le numéro de colonne pour récupérer la valeur dans le fichier-->
				<IMAGE></IMAGE> <!--Doit contenir le nom du fichier IMAGE à charger, avec l'extension (.png, .jpg, etc...)-->
				<H_IMG></H_IMG> <!--Hauteur de l'image en pixel-->
				<L_IMG></L_IMG> <!--Largeur de l'image en pixel-->
				<POS_IMAGE></POS_IMAGE> <!--Position du libllé par rapport au libellé : AVANT, APRES, DESSUS, DESSOUS-->
				<CLASSE></CLASSE> <!--Nom éventuel de la classe à utiliser pour la cellule-->
			</CELLULE>
			<CELLULE nom_cellule="L1C1"> <!--NE JAMAIS MODIFIER-->
				<NAME>L1C1</NAME> <!--NOM DE LA CELLULE-->
				<LIB>Nombre de posé pendant la P2</LIB>
				<ELEMENT>IMAGE</ELEMENT> <!--Type de champs à créer -->
				<TYPE></TYPE> <!--Type de caractères autorisés en cas de champs INPUT-->
				<SIZE></SIZE> <!--Taille du champs en cas de champs INPUT-->
				<MAX_CAR></MAX_CAR> <!--Nombre de caractères autorisée en cas de champs INPUT-->
				<CADRAGE>LEFT</CADRAGE> <!--Cadrage horizontal de la cellule : LEFT, RIGHT, CENTER-->
				<CADRAGE_V>middle</CADRAGE_V> <!--Cadrage vertical de la cellule : BOTTOM, TOP, MIDDLE-->
				<VAL_INIT></VAL_INIT> <!--Valeur par défaut, si besoin-->
				<VAL_COUL_VERT>100</VAL_COUL_VERT> <!--Valeur limite pour affichage fond champs en vert (vide=coulmeur par défaut)-->
				<VAL_COUL_ORANGE>500</VAL_COUL_ORANGE> <!--Valeur limite pour affichage fond champs en orange (vide=coulmeur par défaut)-->
				<VAL_COUL_ROUGE>1000</VAL_COUL_ROUGE> <!--Valeur limite pour affichage fond champs en rouge (vide=coulmeur par défaut)-->
				<FICHIER>t_traj</FICHIER> <!--Nom du fichier à charger sans extention et sans date "NomFic_" et pas "NomFic_JJMMAAAA.TXT"-->
				<FORMAT_NON_FIC>AAAA_MM_JJ_nomdufichier</FORMAT_NON_FIC> <!--Voir commentaire au début-->
				<EXTENSION>txt</EXTENSION> <!--extension du fichier à charger (txt, csv, etc). QUE DES FICHIERS TEXTE-->
				<SEPARATEUR>;</SEPARATEUR> <!--Définit le séparateur utilisé dans le fichier : NE JAMAIS UTILISER ' ' ou TAB-->
				<LIG_FIC>5007</LIG_FIC> <!--Définit le numéro de ligne pour récupérer la valeur dans le fichier-->
				<COL_FIC>3</COL_FIC> <!--Définit le numéro de colonne pour récupérer la valeur dans le fichier-->
				<IMAGE>ledblue-icone-7520-32.png</IMAGE> <!--Contient le nom du fichier IMAGE à charger, avec l'extension (.png, .jpg, etc...)-->
				<H_IMG>32</H_IMG> <!--Hauteur de l'image en pixel-->
				<L_IMG>32</L_IMG> <!--Largeur de l'image en pixel-->
				<POS_IMAGE>APRES</POS_IMAGE> <!--Position du libllé par rapport au libellé : AVANT, APRES, DESSUS, DESSOUS-->
				<CLASSE></CLASSE> <!--Nom éventuel de la classe à utiliser pour la cellule-->
			</CELLULE>
			<CELLULE nom_cellule="L1C2"> <!--NE JAMAIS MODIFIER-->
				<NAME>L1C2</NAME> <!--NOM DE LA CELLULE-->
				<LIB>ASMA CRNA</LIB>
				<ELEMENT>LIB</ELEMENT> <!--Type de champs à créer -->
				<TYPE></TYPE> <!--Type de caractères autorisés en cas de champs INPUT-->
				<SIZE></SIZE> <!--Taille du champs en cas de champs INPUT-->
				<MAX_CAR></MAX_CAR> <!--Nombre de caractères autorisée en cas de champs INPUT-->
				<CADRAGE>LEFT</CADRAGE> <!--Cadrage horizontal de la cellule : LEFT, RIGHT, CENTER-->
				<CADRAGE_V>middle</CADRAGE_V> <!--Cadrage vertical de la cellule : BOTTOM, TOP, MIDDLE-->
				<VAL_INIT></VAL_INIT> <!--Valeur par défaut, si besoin-->
				<VAL_COUL_VERT></VAL_COUL_VERT> <!--Valeur limite pour affichage fond champs en vert (vide=coulmeur par défaut)-->
				<VAL_COUL_ORANGE></VAL_COUL_ORANGE> <!--Valeur limite pour affichage fond champs en orange (vide=coulmeur par défaut)-->
				<VAL_COUL_ROUGE></VAL_COUL_ROUGE> <!--Valeur limite pour affichage fond champs en rouge (vide=coulmeur par défaut)-->
				<FICHIER></FICHIER> <!--Nom du fichier TXT à charger-->
				<EXTENSION></EXTENSION> <!--extension du fichier à charger (txt, csv, etc). QUE DES FICHIERS TEXTE-->
				<EXTENSION></EXTENSION> <!--extension du fichier à charger (txt, csv, etc). QUE DES FICHIERS TEXTE-->
				<SEPARATEUR></SEPARATEUR> <!--Définit le séparateur utilisé dans le fichier : NE JAMAIS UTILISER ' ' ou TAB-->
				<LIG_FIC></LIG_FIC> <!--Définit le numéro de ligne pour récupérer la valeur dans le fichier-->
				<COL_FIC></COL_FIC> <!--Définit le numéro de colonne pour récupérer la valeur dans le fichier-->
				<IMAGE></IMAGE> <!--Doit contenir le nom du fichier IMAGE à charger, avec l'extension (.png, .jpg, etc...)-->
				<H_IMG></H_IMG> <!--Hauteur de l'image en pixel-->
				<L_IMG></L_IMG> <!--Largeur de l'image en pixel-->
				<POS_IMAGE></POS_IMAGE> <!--Position du libllé par rapport au libellé : AVANT, APRES, DESSUS, DESSOUS-->
				<CLASSE></CLASSE> <!--Nom éventuel de la classe à utiliser pour la cellule-->
			</CELLULE>
			<CELLULE nom_cellule="L2C1"> <!--NE JAMAIS MODIFIER-->
				<NAME>L2C1</NAME> <!--NOM DE LA CELLULE-->
				<LIB>ASMA TMA</LIB>
				<ELEMENT>LIB</ELEMENT> <!--Type de champs à créer -->
				<TYPE></TYPE> <!--Type de caractères autorisés en cas de champs INPUT-->
				<SIZE></SIZE> <!--Taille du champs en cas de champs INPUT-->
				<MAX_CAR></MAX_CAR> <!--Nombre de caractères autorisée en cas de champs INPUT-->
				<CADRAGE>LEFT</CADRAGE> <!--Cadrage horizontal de la cellule : LEFT, RIGHT, CENTER-->
				<CADRAGE_V>middle</CADRAGE_V> <!--Cadrage vertical de la cellule : BOTTOM, TOP, MIDDLE-->
				<VAL_INIT></VAL_INIT> <!--Valeur par défaut, si besoin-->
				<VAL_COUL_VERT></VAL_COUL_VERT> <!--Valeur limite pour affichage fond champs en vert (vide=coulmeur par défaut)-->
				<VAL_COUL_ORANGE></VAL_COUL_ORANGE> <!--Valeur limite pour affichage fond champs en orange (vide=coulmeur par défaut)-->
				<VAL_COUL_ROUGE></VAL_COUL_ROUGE> <!--Valeur limite pour affichage fond champs en rouge (vide=coulmeur par défaut)-->
				<FICHIER></FICHIER> <!--Nom du fichier TXT à charger-->
				<EXTENSION></EXTENSION> <!--extension du fichier à charger (txt, csv, etc). QUE DES FICHIERS TEXTE-->
				<EXTENSION></EXTENSION> <!--extension du fichier à charger (txt, csv, etc). QUE DES FICHIERS TEXTE-->
				<SEPARATEUR></SEPARATEUR> <!--Définit le séparateur utilisé dans le fichier : NE JAMAIS UTILISER ' ' ou TAB-->
				<LIG_FIC></LIG_FIC> <!--Définit le numéro de ligne pour récupérer la valeur dans le fichier-->
				<COL_FIC></COL_FIC> <!--Définit le numéro de colonne pour récupérer la valeur dans le fichier-->
				<IMAGE></IMAGE> <!--Doit contenir le nom du fichier IMAGE à charger, avec l'extension (.png, .jpg, etc...)-->
				<H_IMG></H_IMG> <!--Hauteur de l'image en pixel-->
				<L_IMG></L_IMG> <!--Largeur de l'image en pixel-->
				<POS_IMAGE></POS_IMAGE> <!--Position du libllé par rapport au libellé : AVANT, APRES, DESSUS, DESSOUS-->
				<CLASSE></CLASSE> <!--Nom éventuel de la classe à utiliser pour la cellule-->
			</CELLULE>
			<CELLULE nom_cellule="L2C2"> <!--NE JAMAIS MODIFIER-->
				<NAME>L2C2</NAME> <!--NOM DE LA CELLULE-->
				<LIB>ATFM delay</LIB>
				<ELEMENT>LIB</ELEMENT> <!--Type de champs à créer -->
				<TYPE></TYPE> <!--Type de caractères autorisés en cas de champs INPUT-->
				<SIZE></SIZE> <!--Taille du champs en cas de champs INPUT-->
				<MAX_CAR></MAX_CAR> <!--Nombre de caractères autorisée en cas de champs INPUT-->
				<CADRAGE>LEFT</CADRAGE> <!--Cadrage horizontal de la cellule : LEFT, RIGHT, CENTER-->
				<CADRAGE_V>middle</CADRAGE_V> <!--Cadrage vertical de la cellule : BOTTOM, TOP, MIDDLE-->
				<VAL_INIT></VAL_INIT> <!--Valeur par défaut, si besoin-->
				<VAL_COUL_VERT></VAL_COUL_VERT> <!--Valeur limite pour affichage fond champs en vert (vide=coulmeur par défaut)-->
				<VAL_COUL_ORANGE></VAL_COUL_ORANGE> <!--Valeur limite pour affichage fond champs en orange (vide=coulmeur par défaut)-->
				<VAL_COUL_ROUGE></VAL_COUL_ROUGE> <!--Valeur limite pour affichage fond champs en rouge (vide=coulmeur par défaut)-->
				<FICHIER></FICHIER> <!--Nom du fichier TXT à charger-->
				<EXTENSION></EXTENSION> <!--extension du fichier à charger (txt, csv, etc). QUE DES FICHIERS TEXTE-->
				<SEPARATEUR></SEPARATEUR> <!--Définit le séparateur utilisé dans le fichier : NE JAMAIS UTILISER ' ' ou TAB-->
				<LIG_FIC></LIG_FIC> <!--Définit le numéro de ligne pour récupérer la valeur dans le fichier-->
				<COL_FIC></COL_FIC> <!--Définit le numéro de colonne pour récupérer la valeur dans le fichier-->
				<IMAGE></IMAGE> <!--Doit contenir le nom du fichier IMAGE à charger, avec l'extension (.png, .jpg, etc...)-->
				<H_IMG></H_IMG> <!--Hauteur de l'image en pixel-->
				<L_IMG></L_IMG> <!--Largeur de l'image en pixel-->
				<POS_IMAGE></POS_IMAGE> <!--Position du libllé par rapport au libellé : AVANT, APRES, DESSUS, DESSOUS-->
				<CLASSE></CLASSE> <!--Nom éventuel de la classe à utiliser pour la cellule-->
			</CELLULE>
...
...
...
//La fonction qui créé les champs DATE
function CreationElementDate(P_NomTAB, P_Name, P_Lib, P_Align, P_ValInit) {
	WListeJ = P_Name + "_JJ";
	WListeM = P_Name + "_MM";
	WListeA = P_Name + "_AAAA";
	var WLigneDate = "<tr><td colspan='4'>";
	WLigneDate = WLigneDate + "<DIV " + P_Align +">";
	WLigneDate = WLigneDate + "<LABEL for='select'>" + P_Lib + "</LABEL>";
	WLigneDate = WLigneDate + "<SELECT name='" + WListeJ + "' id='" + WListeJ + "'>";
	WLigneDate = WLigneDate + "</SELECT>";
	WLigneDate = WLigneDate + "<SELECT name='" + WListeM + "' id='" + WListeM + "'>";
	WLigneDate = WLigneDate + "</SELECT>";
	WLigneDate = WLigneDate + "<SELECT name='" + WListeA + "' id='" + WListeA + "'>";
	WLigneDate = WLigneDate + "</SELECT>";
	WLigneDate = WLigneDate + "</DIV></td>";
	WLigneDate = WLigneDate + "</tr>";
	$('#'+P_NomTAB).append($(WLigneDate));
	Chargement_Listes_Jours(WListeJ);
	Chargement_Listes_Mois(WListeM);
	Chargement_Listes_Annee(WListeA, 2015);
	InitDate(WListeJ, WListeM, WListeA, P_ValInit);
}

Et voici mon code

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
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
 
var WIndex = 1;
var WIndexTab = 0;
$(xml).find('MATRICE').find('SECTION').each(
function() {  
	WNom_Section = $(this).attr('nom_section');
	//Création de la DIV dans la div DIVTAB_00
	var WDivTAB_00 = document.getElementById("DivTAB_00");
	var WNomDIV = "DivTAB" + WIndex;
	var WDiv = document.createElement("div");
	WDiv.setAttribute("id", WNomDIV);
//					WDiv.setAttribute("class", "CSSTableBleueCoinsArrondis");
//					WDiv.setAttribute("class", G_CLASSE_TAB);
//					WDiv.setAttribute("margin-bottom", "150px");
	WDivTAB_00.appendChild(WDiv);
	var WDivID = document.getElementById(WNomDIV);
	//Création de la table dans la DIV
	var WNomTAB = "Tab_CAPA" + WIndex;
	var WTable = document.createElement("table");
	WTable.setAttribute("id", WNomTAB);
	WTable.setAttribute("border", 1);
	WTable.setAttribute("cellspacing", 1);
	WTable.setAttribute("cellpadding", 1);
//					WTable.setAttribute("class", "Table_IE8"); // Définir la class pour les tables
	WDivID.appendChild(WTable);
 
	$(this).find('CELLULE:even').each(
	function() { 
		var WNomCell_1 = $(this).attr('nom_cellule');
		var WNomCell_2 = $(this).next('CELLULE').attr('nom_cellule');
 
		var WName1 = $(this).find('NAME').text();
		var WLib1 = $(this).find('LIB').text();
		var WElement1 = $(this).find('ELEMENT').text();
		var WType1 = $(this).find('TYPE').text();
		var WCadrage1 = $(this).find('CADRAGE').text();
		var WCadrage_V1 = $(this).find('CADRAGE_V').text();
		var WValInit1 = $(this).find('VAL_INIT').text();
		var WSize1 = $(this).find('SIZE').text();
		var WMax_Car1 = $(this).find('MAX_CAR').text();
		var WVal_Vert1 = $(this).find('VAL_COUL_VERT').text();
		var WVal_Orange1 = $(this).find('VAL_COUL_ORANGE').text();
		var WVal_Rouge1 = $(this).find('VAL_COUL_ROUGE').text();
		var WFichier1 = $(this).find('FICHIER').text();
		var WExtension1 = $(this).find('EXTENSION').text();
		var WSeparateur1 = $(this).find('SEPARATEUR').text();
		var WLig_Fic1 = parseInt($(this).find('LIG_FIC').text());
		var WCol_Fic1 = parseInt($(this).find('COL_FIC').text());
		var WImage1 = $(this).find('IMAGE').text();
		var WH_Img1 = $(this).find('H_IMG').text();
		var WL_Img1 = $(this).find('L_IMG').text();
		var WPosImage1 = $(this).find('POS_IMAGE').text();
		var WClasse1 = $(this).find('CLASSE').text();
 
		WIndexTab = WIndexTab + 1;
		G_TAB_NOM[WIndexTab] = WName1;
		G_TAB_LIB[WIndexTab] = WLib1;
		G_TAB_TYPE[WIndexTab] = WType1;
		G_TAB_CADRAGE[WIndexTab] = WCadrage1;
		G_TAB_VERT[WIndexTab] = WVal_Vert1;
		G_TAB_ORANGE[WIndexTab] = WVal_Orange1;
		G_TAB_ROUGE[WIndexTab] = WVal_Rouge1;
		G_TAB_FICHIER[WIndexTab] = WFichier1;
		G_TAB_IMAGE[WIndexTab] = WImage1;
		G_TAB_POSIMAGE[WIndexTab] = WPosImage1;
		G_TAB_CLASSE[WIndexTab] = WClasse1;
 
		if (WElement1 !== "DATE")
		{
			var WName2 = $(this).next('CELLULE').find('NAME').text();
			var WLib2 = $(this).next('CELLULE').find('LIB').text();
			var WElement2 = $(this).next('CELLULE').find('ELEMENT').text();
			var WType2 = $(this).next('CELLULE').find('TYPE').text();
			var WCadrage2 = $(this).next('CELLULE').find('CADRAGE').text();
			var WCadrage_V2 = $(this).next('CELLULE').find('CADRAGE_V').text();
			var WValInit2 = $(this).next('CELLULE').find('VAL_INIT').text();
			var WSize2 = $(this).next('CELLULE').find('SIZE').text();
			var WMax_Car2 = $(this).next('CELLULE').find('MAX_CAR').text();
			var WVal_Vert2 = $(this).next('CELLULE').find('VAL_COUL_VERT').text();
			var WVal_Orange2 = $(this).next('CELLULE').find('VAL_COUL_ORANGE').text();
			var WVal_Rouge2 = $(this).next('CELLULE').find('VAL_COUL_ROUGE').text();
			var WFichier2 = $(this).next('CELLULE').find('FICHIER').text();
			var WExtension2 = $(this).next('CELLULE').find('EXTENSION').text();
			var WSeparateur2 = $(this).next('CELLULE').find('SEPARATEUR').text();
			var WLig_Fic2 = $(this).next('CELLULE').find('LIG_FIC').text();
			var WCol_Fic2 = $(this).next('CELLULE').find('COL_FIC').text();
			var WImage2 = $(this).next('CELLULE').find('IMAGE').text();
			var WH_Img2 = $(this).next('CELLULE').find('H_IMG').text();
			var WL_Img2 = $(this).next('CELLULE').find('L_IMG').text();
			var WPosImage2 = $(this).next('CELLULE').find('POS_IMAGE').text();
			var WClasse2 = $(this).next('CELLULE').find('CLASSE').text();
		}
...
ici je compose dynamiquement mes lignes HTML
...
		$('#'+WNomTAB).append($(WLigne));

Le programme, entier, créé dynamiquement une page HTML sous la forme d'un tableau de 4 colonnes, n lignes et je lis donc les noeuds 2 par 2 pour afficher chaque ligne en une seule fois (soit 4 colonnes).

Le problème est que lorsque je détecte un élément de type DATE, il faudrait qu'il ne passe pas au noeaud suivant, car on me demande que les dates occupent une ligne entière.
La ligne suivante doit donc commencer au noeud suivant.

Dans mon fichier XML, vous voyez que le 1er noeud est une date, donc il faut que la première ligne contienne uniquement cette date et ce n'est qu'à partir du 2ème noeud que doit commencer la 2ème ligne.

Une petite capture qui aidera surement à me comprendre ;)
Pièce jointe 220148

En fait, je pense qu'il ne faudrait pas faire le .next() en cas de date ou alors faire un .prev(), mais tous les essais que j'ai fait n'ont pas fonctionné et c'est pourquoi j'en appel à vos connaissances ;)

Je précise que s'il n'y a pas de champ DATE, ça fonctionne nickel.

J'espère que je suis assez clair pour me faire comprendre et surtout que vous pourrez m'aider.

Merci d'avance pour votre aide.

12/09/2016, 17h16
SpaceFrog

colle juste un colspan à la cellule ...
12/09/2016, 19h39
NoSmoking

Bonjour,
juste pour dire : curieux quand même ce mélange de javascript vanilla et jQuery !

Citation:

Envoyé par SpaceFrog

colle juste un colspan à la cellule ...

Merci, mais, à laquelle ? J'ai fait plusieurs essais sans résultat.

Citation:

Envoyé par NoSmoking

Bonjour,
juste pour dire : curieux quand même ce mélange de javascript vanilla et jQuery !

(je ne suis pas un puriste, ;), et je fais avec les moyens du bord...)
Pourquoi ça ? Qu'est-ce qui te gène ?

Je vous mets le code qui génère la page HTML, ce qui vous aidera peut-être plus facilement à m'aider.

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
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
131
132
133
134
 
...
...
...
						WCadrage1 = " align='" + WCadrage1 + "' valign='" + WCadrage_V1 + "'";
						WCadrage2 = " align='" + WCadrage2 + "' valign='" + WCadrage_V2 + "'";
						WCol_Fic1 = WCol_Fic1 - 1;// Obligatoire, le comptage des colonnes commence à 0 et non à 1;
						WCol_Fic2 = WCol_Fic2 - 1;// Obligatoire, le comptage des colonnes commence à 0 et non à 1;
// ELEMENT = DATE
						var WL = "";
						if (WElement1 === "DATE")
						{
							if (WValInit1 === "") // Pour les dates, on ne doit pas avoir de VAL_INIT à vide.
							{
								WValInit1 = 0;
							}
							WL = CreationElementDate(WNomTAB, WName1, WLib1, WCadrage1, WValInit1);
//							$('#'+WNomTAB).append($(WL));
						}
						if (WElement2 === "DATE") // Pour les dates, on ne doit pas avoir de VAL_INIT à vide.
						{
							if (WValInit2 === "")
							{
								WValInit2 = 0;
							}
							WL = CreationElementDate(WNomTAB, WName2, WLib2, WCadrage2, WValInit2);
//							$('#'+WNomTAB).append($(WL));
						}
 
						var WLigne = "<tr valign='middle' >";
 
// Lecture du fichier si besoin
						var WVal1 = "";
						var WVal2 = "";
 
						if (WFichier1 !== "" && typeof(WFichier1) !== "undefined" )
						{
							WVal1 = LectureFichier(WFichier1, WExtension1, WLig_Fic1, WCol_Fic1, WSeparateur1);
						}
						if (WFichier2 !== "" && typeof(WFichier2) !== "undefined" )
						{
							WVal2 = LectureFichier(WFichier2, WExtension2, WLig_Fic2, WCol_Fic2, WSeparateur2);
						}
// ELEMENT = LIB						
						if (WElement1 === "LIB")
						{
							if (WLib1 !== "")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage1 + ">" + WLib1 + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage1 + ">" + WVal1 + "</td>";
							}
							else
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage1 + ">" + "&nbsp;" + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage1 + ">" + "&nbsp;" + "</td>";
							}
						}
						if (WElement2 === "LIB")
						{
							if (WLib2 !== "")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage2 + ">" + WLib2 + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage2 + ">" + WVal2 + "</td>";
							}
							else
							{
								WLigne = WLigne + "<td width='" + WTaille1+"'" + WCadrage2 + ">" + "&nbsp;" + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2+"'" + WCadrage2 + ">" + "&nbsp;" + "</td>";
							}
						}
// ELEMENT = IMAGE
						var WImageACharger = "";
						var WIMG = "";
						if (WElement1 === "IMAGE")
						{
							WImageACharger = G_RepImages + WImage1;
							WIMG = "<IMG src='" + WImageACharger + "' width='" + WL_Img1 + "' height='" + WH_Img1 + "'>";
							if (WPosImage1 === "AVANT")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage1 + ">" + WLib1 + "&nbsp;" + WIMG + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage1 + ">" + WVal1 + "</td>";
							}
							if (WPosImage1 === "APRES")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage1 + ">" + WIMG + "&nbsp;" + WLib1 + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage1 + ">" + WVal1 + "</td>";
							}
							if (WPosImage1 === "DESSUS")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage1 + ">" + WLib1 + "<BR/>" + WIMG + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage1 + ">" + WVal1 + "</td>";
							}
							if (WPosImage1 === "DESSOUS")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage1 + ">" + WIMG + "<BR/>" + WLib1 + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage1 + ">" + WVal1 + "</td>";
							}
						}
						if (WElement2 === "IMAGE")
						{
							WImageACharger = G_RepImages + WImage2;
							WIMG = "<IMG src='" + WImageACharger + "' width='" + WL_Img2 + "' height='" + WH_Img2 + "'>";
							if (WPosImage2 === "AVANT")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage2 + ">" + WLib2 + "&nbsp;" + WIMG + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage2 + ">" + WVal2 + "</td>";
							}
							if (WPosImage2 === "APRES")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage2 + ">" + WIMG + "&nbsp;" + WLib2 + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage2 + ">" + WVal2 + "</td>";
							}
							if (WPosImage2 === "DESSUS")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage2 + ">" + WLib2 + "<BR/>" + WIMG + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage2 + ">" + WVal2 + "</td>";
							}
							if (WPosImage2 === "DESSOUS")
							{
								WLigne = WLigne + "<td width='" + WTaille1 + "'" + WCadrage2 + ">" + WIMG + "<BR/>" + WLib2 + "</td>";
								WLigne = WLigne + "<td width='" + WTaille2 + "'" + WCadrage2 + ">" + WVal2 + "</td>";
							}
						}
						WLigne = WLigne + "</tr>";
						$('#'+WNomTAB).append($(WLigne));
					});
					WIndex = WIndex + 1;
				});
			} // FIN SUCCES
		}); // FIN AJAX
	});
...
...
...

13/09/2016, 19h48
NoSmoking
Citation:

Pourquoi ça ? Qu'est-ce qui te gène ?

ce genre de code
Code:

1 2 3 4 var WDiv = document.createElement("div"); WDiv.setAttribute("id", WNomDIV); WDivTAB_00.appendChild(WDiv); var WDivID = document.getElementById(WNomDIV);
en fait WDiv c'est la même chose que WDivIDou encore
Code:

1 2 3 4 var WName2 = $(this).next('CELLULE').find('NAME').text(); var WLib2 = $(this).next('CELLULE').find('LIB').text(); var WElement2 = $(this).next('CELLULE').find('ELEMENT').text(); // etc...
avec une répétition de $(this).next('CELLULE'), donc autant prendre le temps de « comprendre/maitriser » le javascript et apprendre/comprendre et utiliser jQuery mais n'utiliser que des bouts qui te facilite la vie ne t'aidera pas à progresser.
14/09/2016, 09h38
Zebulon777

Oui, mais je dois faire les 2 la fois, car on ne me laisse pas trop le temps.

Je ne vois pas comment éviter la répétition de $(this).next('CELLULE') puisqu'il faut que je ramène plusieurs valeurs différentes du XML ?

ET je n'arrive toujours pas à comprendre pourquoi ce code me ramène une case "blanche" ?

Citation:

Oui, mais je dois faire les 2 la fois, car on ne me laisse pas trop le temps.

Prendre le temps maintenant c'est gagner du temps plus tard ;)

Citation:

Je ne vois pas comment éviter la répétition de $(this).next('CELLULE')...

simplement en factorisant, tu gagnes en lisibilité et en performance.
Code:

1 2 3 4 5 6 var $_nextCellule = $(this).next('CELLULE'); // mise en cache évite le rappel des méthodes var WName2 = $_nextCellule.find('NAME').text(); var WLib2 = $_nextCellule.find('LIB').text(); var WElement2 = $_nextCellule.find('ELEMENT').text(); // etc...
Citation:

ET je n'arrive toujours pas à comprendre pourquoi ce code me ramène une case "blanche" ?

parce que tu lui demande pardi !

Ton soucis vient de la lecture par deux de tes données et donc de la fermeture des <tr>.
Lorsque tu rencontres une donnée « DATE » tu fermes la ligne et tu traites ta deuxième données qui se retrouve donc également dans une ligne fermée.

Il te faut lire tes données une par une.

Cela pourrait donner en gros :
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 // pour gestion nouvelle ligne NbrColonneTraitee = 0 POUR TOUTES les données FAIRE RecuperationDONNEE () SI NbrColonneTraitee EGAL 0 ALORS Ouverture <TR> Fin SI SI donnée DATE ALORS // formate le HTML avec les données FormatageLigneDATE () // force fermeture <TR> NbrColonneTraitee = 2 SINON // formate le HTML avec les données FormatageLigneDONNEE () // comptabilise la colonne NbrColonneTraitee += 1 Fin SI SI NbrColonneTraitee EGAL 2 ALORS Fermeture </TR> AjoutLigneCrée () // pour ouverture prochaine ligne NbrColonneTraitee = 0 Fin SI Fin FAIRE

16/09/2016, 08h32
Zebulon777

Ha du constructif, merci !

Je ne comprends pas ton histoire de factorisation du code, c'est le "$_" ?

Très clair ton morceau de code, je vais m'en inspirer.
18/09/2016, 10h20
NoSmoking
Citation:

Je ne comprends pas ton histoire de factorisation du code, c'est le "$_" ?

rien d'autre que le nom d'une variable j'aurais tout aussi pu écrire

Code:

var nextCellule = $(this).next('CELLULE'); // mise en cache évite le rappel des méthodes

Imaginons que l'on te demande de prendre un livre, aller à la page 56 et lire toutes les lignes de cette page, en vertu de ton code tu ferais
1. prendre le livre
2. ouvrir à la page 56
3. lire ligne #1
4. prendre le livre
5. ouvrir à la page 56
6. lire ligne #2
7. prendre le livre
8. ouvrir à la page 56
9. lire ligne #3
10. etc...
ce qui est ballot puisque instinctivement une fois le livre ouvert à la page 56 tu liras la ligne #1, ligne #2 ...etc ... mais comme il te faut refermer le livre à chaque lecture, une « solution » serait de mettre un marque page sur la page 56, ainsi tu auras accès plus rapidement à la page sans refaire de recherches, c'est le rôle de la variable $_nextCellule.
19/09/2016, 08h34
Zebulon777

Super, j'ai tout compris, merci.