danielhagnoul

Cacher les colonnes d'une table, lorsque le titre de la colonne ne contient pas les mots recherchés

Noter ce billet

par

, 08/03/2018 à 00h43 (1268 Affichages)

Pour avoir la possibilité de cacher une ou plusieurs colonnes d'une table, il faut utiliser le tag "col" avec une classe différente pour chaque colonne.

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
51
52
53
54
55
56
57
58
59
60
61
62
<table id="tableCherche">
	<colgroup>
		<col class="col0">
		<col class="col1">
		<col class="col2">
		<col class="col3">
		<col class="col4">
		<col class="col5">
	</colgroup>
	<thead>
		<tr>
			<th>je suis la ou je suis avec lui</th>
			<th>il est la avec moi</th>
			<th>je suis ce que je suis</th>
			<th>je ne suis pas avec lui</th>
			<th>suis moi</th>
			<th>lui me suis</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>10</td>
			<td>20</td>
			<td>30</td>
			<td>40</td>
			<td>50</td>
			<td>60</td>
		</tr>
		<tr>
			<td>11</td>
			<td>21</td>
			<td>31</td>
			<td>41</td>
			<td>51</td>
			<td>61</td>
		</tr>
		<tr>
			<td>12</td>
			<td>22</td>
			<td>32</td>
			<td>42</td>
			<td>52</td>
			<td>62</td>
		</tr>
		<tr>
			<td>13</td>
			<td>23</td>
			<td>33</td>
			<td>43</td>
			<td>53</td>
			<td>63</td>
		</tr>
		<tr>
			<td>14</td>
			<td>24</td>
			<td>34</td>
			<td>44</td>
			<td>54</td>
			<td>64</td>
		</tr>
	</tbody>
</table>

Je commence par construire trois Array :

arTHs contiendra l'élément TH de chaque colonne
arTitres contiendra le titre de chaque colonne,
arTitresMots contiendra des Array, chacun contiendra les mots composant le titre d'une colonne.

La fonction strSplitEtNettoye( str ) transforme un texte en Array (split) contenant les mots composant le texte. Chaque mot est nettoyé d'éventuelles scories par la fonction replace( /[" ",;:=?!]*/g, "" ).

Je construis ensuite l'Array arTitresMontre qui contiendra autant de booléens "true" qu'il y a de colonnes dans la table.

Code JavaScript :

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
const
  elemTexteCherche = k$("#textCherche"),
  elemBtnCherche = k$("#btnCherche"),
  elemBtnReset = k$("#btnReset"),
  elemTableCherche = k$("#tableCherche"),
  arTHs = Array.from(elemTableCherche.querySelectorAll("thead > tr > th")),
  arTitres = [],
  arTitresMots = [],
  strSplitEtNettoye = str => { // les mots doivent être séparés par un espace
    let
      arMots = str.trim().split(" ");
 
    for (const [i, mot] of arMots.entries()) {
      arMots[i] = mot.replace(/[" ",;:=?!]*/g, "");
    }
 
    arMots = arMots.filter(mot => {
      if (mot.length > 0) return mot;
    });
 
    return arMots;
  };
 
for (const th of arTHs) {
  arTitres.push(th.textContent);
}
 
for (const titre of arTitres) {
  arTitresMots.push(strSplitEtNettoye(titre));
}
 
let
  arTitresMontre = Array.from(new Array(arTitres.length), (item, i) => true);

Lorsque l'utilisateur clique sur le bouton "Chercher", les mots contenus dans l'input d'ID "textCherche" sont traités par la méthode strSplitEtNettoye pour construire l'Array arMots.

Pour chaque mot cherché, on boucle sur les titres des colonnes (arTitres). La présence du mot cherché dans le titre est donnée par arTitresMots[ i ].includes( mot ) qui renvoie un booléen. On modifie arTitresMontre[ i ] en conséquence.

Pour finir, on boucle sur chaque booléen contenu dans arTitresMontre. Lorsqu'il a la valeur "false" je cache la colonne correspondante avec elemTableCherche.querySelector( ".col" + i ).style.visibility = "collapse";.

Code JavaScript :

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
elemBtnCherche.addEventListener("click", ev => {
  let
    arMots = strSplitEtNettoye(elemTexteCherche.value);
 
  for (const mot of arMots) {
    for (const [i, titre] of arTitres.entries()) {
      arTitresMontre[ i ] = arTitresMots[ i ].includes( mot );
    }
  }
 
  for (const [i, bool] of arTitresMontre.entries()) {
    if (!bool) {
      elemTableCherche.querySelector(".col" + i).style.visibility =
        "collapse";
    }
  }
}, false);

Pour rendre toutes les colonnes visibles, l'utilisateur doit cliquer sur le bouton "Reset"

Code JavaScript :

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

1
2
3
4
5
elemBtnReset.addEventListener("click", ev => {
  for (const [i, th] of arTHs.entries()) {
    elemTableCherche.querySelector(".col" + i).style.visibility = "visible";
  }
}, false);

Exemple :

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
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
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<title>Test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
 
                th, td {
                        width: 10rem;
                        height: 1.5rem;
                        padding: 0.3rem;
                        border: 1pt dotted lightgrey;
                }
                table, th {
                        margin-top: 1rem;
                        border-spacing: 0;
                }
                table, th {
                        border: 1pt solid grey;
                }
                .col0, .col1, .col2, .col3, .col4, .col5 {
                        visibility: visible;
                }
 
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/fr.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.5.1.js"></script>
	<script>
    'use strict';
                
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
                        // code du test
                        
                        
                        // fin code du test
                        
                }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        const
                                elemTexteCherche = k$( "#textCherche" ),
                                elemBtnCherche = k$( "#btnCherche" ),
                                elemBtnReset = k$( "#btnReset" ),
                                elemTableCherche = k$( "#tableCherche" ),
                                arTHs = Array.from( elemTableCherche.querySelectorAll( "thead > tr > th" ) ),
                                arTitres = [],
                                arTitresMots = [],
                                strSplitEtNettoye = str => { // les mots doivent être séparés par un espace
                                        let
                                                arMots = str.trim().split( " " );
                                        
                                        for ( const [ i, mot ] of arMots.entries() ){
                                                arMots[ i ] = mot.replace( /[" ",;:=?!]*/g, "" );
                                        }
                                        
                                        arMots = arMots.filter( mot => { if ( mot.length > 0 ) return mot; } );
                                        
                                        return arMots;
                                };
                                
                        for ( const th of arTHs ){
                                arTitres.push( th.textContent );
                        }
                        
                        for ( const titre of arTitres ){
                                arTitresMots.push( strSplitEtNettoye( titre ) );
                        }
                        
                        let
                                arTitresMontre = Array.from( new Array( arTitres.length ), ( item, i ) => true );
                                
                        elemBtnCherche.addEventListener( "click", ev => {
                                let
                                        arMots = strSplitEtNettoye( elemTexteCherche.value );
                                
                                for ( const mot of arMots ){
                                        for ( const [ i, titre ] of arTitres.entries() ){
                                            arTitresMontre[ i ] = arTitresMots[ i ].includes( mot );
                                        }
                                }
                                
                                for ( const [ i, bool ] of arTitresMontre.entries() ){
                                        if ( ! bool ){
                                                elemTableCherche.querySelector( ".col" + i ).style.visibility = "collapse";
                                        }
                                }
                        }, false );
                        
                        elemBtnReset.addEventListener( "click", ev => {
                                for ( const [i, th ] of arTHs.entries() ){
                                        elemTableCherche.querySelector( ".col" + i ).style.visibility = "visible";
                                }                               
                        }, false );
                        
                        // fin code du test
                        
      kIDUnique();
    }, false );                 
  </script>
</head>
<body>
	<main>
 
		<label>Mots à rechercher : <input id="textCherche" type="text"></label>
		<button id="btnCherche">Chercher</button>
		<button id="btnReset">Reset</button>
		<table id="tableCherche">
			<colgroup>
				<col class="col0">
				<col class="col1">
				<col class="col2">
				<col class="col3">
				<col class="col4">
				<col class="col5">
			</colgroup>
			<thead>
				<tr>
					<th>je suis la ou je suis avec lui</th>
					<th>il est la avec moi</th>
					<th>je suis ce que je suis</th>
					<th>je ne suis pas avec lui</th>
					<th>suis moi</th>
					<th>lui me suis</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>10</td>
					<td>20</td>
					<td>30</td>
					<td>40</td>
					<td>50</td>
					<td>60</td>
				</tr>
				<tr>
					<td>11</td>
					<td>21</td>
					<td>31</td>
					<td>41</td>
					<td>51</td>
					<td>61</td>
				</tr>
				<tr>
					<td>12</td>
					<td>22</td>
					<td>32</td>
					<td>42</td>
					<td>52</td>
					<td>62</td>
				</tr>
				<tr>
					<td>13</td>
					<td>23</td>
					<td>33</td>
					<td>43</td>
					<td>53</td>
					<td>63</td>
				</tr>
				<tr>
					<td>14</td>
					<td>24</td>
					<td>34</td>
					<td>44</td>
					<td>54</td>
					<td>64</td>
				</tr>
			</tbody>
		</table>
 
	</main>
</body>
</html>