Imbrication conditions if + boucles for

Version imprimable

Je monte en complexité, peut-être d'ailleurs un peu trop pour un non développeur :? ...

J'ai un publipostage de pages HTML, chaque body incluant une table1 qui elle-même inclue une ou plusieurs table(s)2.

J'ai besoin d'afficher (ou supprimer) certains body en fonction d'une condition dans la table1 et de deux conditions dans la table2.

J'arrive sans prble à gérer séparément table1/table2, mais pas à croiser...

J'avais commencé comme ça :

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
 
function Table() {
 
var 
tableau1 = document.getElementsByClassName("table1");
tableau2 = document.getElementsByClassName("table2");
body = document.getElementsByClassName("body");
 
 
for(var i=0, j=0;i<tableau2.length, j<tableau1.length;i++, j++) {
	tab2 = tableau2[i];
	ville = tableau2[i].rows[3].cells[1];
	situation = tableau2[i].rows[1].cells[1];
	tab = tableau1[j];
	site = tableau1[j].rows[1].cells[1];
	bod = body[j];	
		if ((ville.innerHTML.trim()== "Arras") && (situation.innerHTML.trim() == "Disponible") && (site.innerHTML.trim() ==  Arras"))				
 
		{
		bod.style.display='none';				
		}
		else
		{
		bod.style.display='block';	
		}
 
	}
};

qui ne donne rien...

Une autre ébauche pas bcp plus efficace (seule la condition sur la table1 est prise en compte, ça ne semble pas très logique du côté des if) :

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
 
function Tab() {
 
var 
tableau2 = document.getElementsByClassName("table2");
tableau1 = document.getElementsByClassName("table1");
body = document.getElementsByClassName("body");
 
for(var i=0; i<tableau2.length; i++) 
	{
	tab2 = tableau2[i];
	ville = tableau2[i].rows[3].cells[1];
	situation = tableau2[i].rows[1].cells[1];
 
if ((ville.innerHTML.trim()== "Arras") && (situation.innerHTML.trim() == "Disponible"))
		{
			for (var j=0; j<tableau1.length; j++)
			{
			tab = tableau1[j];
			bod = body[j];
			site = tableau1[j].rows[1].cells[1];
					if (site.innerHTML.trim() == "Arras")
					{
					bod.style.display='none';				
					}
					else
					{
					bod.style.display='block';	
					}
				}
			}
		}
	};

Merci d'avance pour tout coup de main !

22/05/2016, 02h37
SylvainPV

Hello,

Tu peux voir à la coloration syntaxique que tu as des problèmes de guillemets manquants dans ta condition if.

Utilise un éditeur avec coloration syntaxique, tel que Atom ou Visual Studio Code, ça t'évitera ce genre d'erreurs bêtes.

Pense aussi à toujours déclarer tes variables avec var, ça t'évitera des problèmes.
22/05/2016, 12h20
Olivier59260

Woups, un copié-collé qui a foiré :oops:. J'utilise Notepad++ (donc j'aurai dû le voir)... Les éditeurs que tu proposes sont plus efficaces ?

Mais du côté du code c'est tjs pareil, tous les bodys remplissant la condition Site sont masqués, sans exception.
22/05/2016, 15h30
SylvainPV

Je pense que Notepad++ fait de la coloration syntaxique maintenant si bien configuré. Mais oui, un éditeur dédié est plus pratique que ce bon vieux notepad. Essaie Atom et fais-toi ton avis.

Tu peux reposter ton code corrigé ?

Ben je n'ai pas corrigé grand chose, à part le guillemet disparu dans le premier code (du côté des variables la console ne m'indique rien de non déclaré...) :

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
 
function Table() {
 
var 
tableau1 = document.getElementsByClassName("table1");
tableau2 = document.getElementsByClassName("table2");
body = document.getElementsByTagName("body");
 
 
for(var i=0, j=0;i<tableau2.length, j<tableau1.length;i++, j++) {
	tab2 = tableau2[i];
	ville = tableau2[i].rows[3].cells[1];
	situation = tableau2[i].rows[1].cells[1];
	tab = tableau1[j];
	site = tableau1[j].rows[1].cells[1];
	bod = body[j];	
		if ((ville.innerHTML.trim()== "Arras") && (situation.innerHTML.trim() == "Disponible") &&(site.innerHTML.trim() == "Arras"))
 
					{
					bod.style.display ="none";				
					}
		else
					{
					bod.style.display ="block";	
					}					
 
			}
		};

et au passage un exemle du html sur lequel je dois agir :

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
<body>
<table class="table1" border="0" cellpadding="10" cellspacing="4" width="100%">
<tr>
<td>La classe 198</td>
<td>Périodique</td>
</tr>
<tr>
<td>NOM_EMPRUNTEUR</td>
<td>SITE_EMPRUNTEUR</td>
<td>Individuel +</td>
<td>08/04/2016</td>
</tr>
<span class="exemplaire">
 
	<table FONT FACE="Arial" size="2" class="table2">
	<tr><td> Exemplaire  :  22142</td></tr>
	<tr><td>Statut : En-service&nbsp;</td>
	<td FONT COLOR="#CC0000">Disponible</td></tr>
	<tr><td> </td></tr>
	<tr><td> Emplacement  : </td>
	<td>Lille</td></tr>
	</table>
 
	<table FONT FACE="Arial" size="2" class="table2">
	<tr><td> Exemplaire  :  22143</td></tr>
	<tr><td>Statut : En-service&nbsp;</td>
	<td FONT COLOR="#CC0000">Disponible</td></tr>
	<tr><td> </td></tr>
	<tr><td> Emplacement  : </td>
	<td>Gravelines</td></tr>
	</table>
 
	<table FONT FACE="Arial" size="2" class="table2">
	<tr><td> Exemplaire  :  22144</td></tr>
	<tr><td>Statut : Autre&nbsp;</td>
	<td FONT COLOR="#CC0000">Indisponible</td></tr>
	<tr><td> </td></tr>
	<tr><td> Emplacement  : </td>
	<td>Calais</td></tr>
	</table>
 
 
</span>
</table>
</body>

Attention au code de vos tables ! Il est impossible de manipuler le DOM correctement si l'intégrité structurelle de vos tables est défaillante.

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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 
    th, td {
      margin: 6px;
      padding: 3px;
      border: 1px dotted grey;
    }
 
  </style>
  <script>
    'use strict';
 
 
    document.addEventListener( 'DOMContentLoaded', function( ev ){
 
 
    }, false );
 
    window.addEventListener( 'load', function( ev ){
 
      var 
        tableau1 = document.querySelectorAll( ".table1" ),
        tableau2 = document.querySelectorAll( ".table2" ),
        body = document.querySelector( "body" );
 
      // debug, console, touche F12
      console.log( "tableau1 = ", tableau1 );
      console.log( "tableau2 = ", tableau2 );
      console.log( "body = ", body );
 
      for ( var i = 0; i < tableau2.length; i++ ){
        var
          tab2 = tableau2[i],
          ville = tableau2[i].rows[4].cells[1],
          situation = tableau2[i].rows[2].cells[1];
 
        // debug, console, touche F12
        console.log( "i = ", i );
        console.log( "tab2 = ", tab2 );
        console.log( "ville = ", ville );
        console.log( "situation = ", situation );
      }
 
    }, false );
  </script>
</head>
<body>
 
  <table class="table1">
    <thead>
      <tr>
        <th>N1</th>
        <th>N2</th>
        <th>N3</th>
        <th>N4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>La classe 198</td>
        <td>Périodique</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>NOM_EMPRUNTEUR</td>
        <td>SITE_EMPRUNTEUR</td>
        <td>Individuel +</td>
        <td>08/04/2016</td>
      </tr>
      <tr>
        <td>La classe 198</td>
        <td>Périodique</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>NOM_EMPRUNTEUR</td>
        <td>SITE_EMPRUNTEUR</td>
        <td>Individuel +</td>
        <td>08/04/2016</td>
      </tr>
      <tr>
        <td>
          <table class="table2">
            <thead>
              <tr>
                <th>M1</th>
                <th>M2</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Exemplaire  :  22142</td>
                <td></td>
              </tr>
              <tr>
                <td>Statut : En-service</td>
                <td>Disponible</td>
              </tr>
              <tr>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>Emplacement</td>
                <td>Lille</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table class="table2">
            <thead>
              <tr>
                <th>M1</th>
                <th>M2</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Exemplaire  :  22143</td>
                <td></td>
              </tr>
              <tr>
                <td>Statut : En-service</td>
                <td>Disponible</td>
              </tr>
              <tr>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>Emplacement</td>
                <td>Gravelines</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
          <table class="table2">
            <thead>
              <tr>
                <th>M1</th>
                <th>M2</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Exemplaire  :  22144</td>
                <td></td>
              </tr>
              <tr>
                <td>Statut : Autre</td>
                <td>Indisponible</td>
              </tr>
              <tr>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>Emplacement</td>
                <td>Calais</td>
              </tr>
            </tbody>
          </table>
        </td>
        <td>
 
        </td>
      </tr>
    </tbody>
  </table>
 
</body>
</html>

24/05/2016, 11h48
Olivier59260

Merci pour ces précisions ; j'avais bien vu que les modèles qui me sont fournis ne correspondent pas à la structure des tableaux dans le DOM, mais comme je manque de temps et que les premiers scripts fonctionnaient...

En regardant votre code de plus près, je vois bien les clarifications sur le document primaire, et je bosse sur l'amélioration du html en essayant de ne pas trop m'éloigner du modèle qui est utilisé par ailleurs. En revanche j'ai du mal à voir en quoi cela peut m'aider à croiser les conditions sur les deux tableaux, sachant que j'arrive déjà à les faire fonctionner séparément.

Je rappelle l'exemple du problème, je n'ai peut-être pas été assez clair :
- je dois agir sur le body à partir d'une condition sur le tableau1 (Site == X) qui fait une première sélection, à laquelle je dois rajouter ensuite une deuxième condition sur chaque tableau2 où (Ville == X && Situation == Disponible).
- sachant que le body est répété x fois, avec un tableau1 répété x fois, et un tableau2 répété y fois (où y >= x) (en fait, le nombre d'exemplaire d'affectés à un document)
24/05/2016, 12h02
danielhagnoul

Ma réponse concerne uniquement la structure de vos tables, car je ne comprends pas vos besoins.

Citation:

Envoyé par Olivier59260

[...] - sachant que le body est répété x fois, avec [...]

Plusieurs tags "body" ! C'est impossible, il n'y a qu'un tag "body" par page web.
24/05/2016, 21h17
Olivier59260

Sisi, dans ch'nord tout est possible :mrgreen:

Plus sérieusement, un vieux sigb me propose dans les formats de sortie du hmtl, qui exporte les données en empilant les pages à la filée. C'est un des seuls moyens que j'ai pour améliorer la sauce des rapports de sortie en fourrant du code par ci, par là. Dans ce cas précis c'est pour du local, pas pour mettre en ligne.

Mais bon, si ça ne le fait pas je remets ça dans ma besace...