Afficher/Cacher des lignes de tableaux

Version imprimable

Bonjour tout le monde,
Alors je souhaiterais pouvoir afficher ou masquer toutes les lignes d'un tableau dont leur id commence par une certaine chaine.

Exemple : je reçois 1 comme paramètre, ça cache toutes les lignes dont l'id est "1......", ou 120134 et que ça cache toutes les lignes du style "123134...."

Alors mon tableau est basique, a part que les id ne se suivent pas en s'incrémentant un à un(c'est plutot du genre : 1, 102, 1123, 2, 45, 451, etc)
ma ligne type : <tr id="132" > <td>...</td> </tr>

Donc pour cela j'ai créer une petite fonction javascript, mais je sais pas comment atteindre les lignes du tableau, donc ça ne fonctionne pas :
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 function affCache(num) { tab = document.getElementById('tableau_sommaire'); num = num + ""; var longueur = num.length; var chaine = ""; for(i=0;i<tab.elements.length;i++) { chaine = tab.elements[i].id.substr(0, longueur); if( chaine == num ) { if(tab.elements[i].style.display == "") tab.elements[i].style.display = "none"; else tab.elements[i].style.display = ""; } } }
Merci d'avance pour votre aide à un débutant en JS :)

oula vaste programme :D

Le problème que tu as c'est que tu veut atteindre des lignes via leur identifiant sans connaitre ce dernier.

Je ne vois qu'une solution assez bourrine :aie:

Parcourir toutes tes lignes de ton tableau, vérifier leurs ids et cacher si leur id correspond.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function affCache(num) { table = document.getElementById('tableau_sommaire'); var longueur = (num + "").length; var chaine = ""; for (var i = 0; i < table.rows.length; i++) { row = table.rows[i]; if (num == row.id.substr(0, longueur){ row.style.display='none' } } }
essaye avec ce code (j'ai pas testé, c'est fait un peu à l'arrache :aie:)

edit : à voir si c'est pas plus performant avec une bonne regexp :mrgreen:

18/08/2009, 16h41
RomainVALERI

Je ne suis pas sûr qu'un id puisse commencer par un chiffre : à vérifier (dsl je n'ai pas le temps de rechercher tout de suite moi même :? )
18/08/2009, 16h44
MasterChief78

Pour l'id si si ça marche avec un chiffre, j'ai tester sur une seule ligne et ça marchait, maintenant j'essaie de faire pour plusieurs lignes.
@lifty, c'était ce genre de solution que je cherchais a faire, je go tester et je te dis

EDIT AFTER TEST : marche pas :(
18/08/2009, 16h45
lifty

Citation:

Envoyé par RomainVALERI

Je ne suis pas sûr qu'un id puisse commencer par un chiffre : à vérifier (dsl je n'ai pas le temps de rechercher tout de suite moi même :? )

Sisi ça marche :mouarf: après pas sur que cela respecte la norme W3C :aie:
18/08/2009, 17h04
Bovino

Citation:

Envoyé par lifty

Sisi ça marche :mouarf: après pas sur que cela respecte la norme W3C :aie:

Je dirais même : après, c'est certain, ça ne respecte pas les normes :mrgreen: mais bon...
Pour revenir à ton souci, tu peux regarder du coté de cette contribution ;)
18/08/2009, 17h05
MasterChief78

Donc ça ne fonctionne pas, déjà premier problème si je fais :

Code:

alert(table.rows.length);

il me donne 1 comme résultat, alors que j'ai bien sur beaucoup plus de lignes...

Merci pour la source Bovino, j'ai modifié mon code comme suit pour utiliser la fonction, mais ça ne marche toujours pas, mon alert n'affiche rien...

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
document.getElementsByReg=function(tag,attr,reg,mod,val){
var tabReg=new Array();
var tabElts=document.body.getElementsByTagName(tag);
var TEL=tabElts.length;
 
if(!(reg instanceof RegExp)){
 
 
       if(reg.indexOf("*")>-1){
		  		reg=reg.replace(/\*/g,'.+');
 		  		reg=new RegExp(reg);
 		  		}
 		else {return	tabReg;
 			   }	
 		}
 
i=0;
while(tabElts[i]){
		if(tabElts[i][attr]){
	         if(reg.test(tabElts[i][attr])){
	         tabReg.push(tabElts[i]);}
	         }
	         reg.test("");
	i++;         
	}
return tabReg;
}
 
 
function affCache(num) {
 
num = "*"+num 	;
table = document.getElementsByReg('tr','id',num);
 
 
alert(table.rows.length);
 
 while(table[i])
 {
		if (table[i].style.display == "") table[i].style.display = "none";
		else table[i].style.display = "";
 
	i++;
 }
 
 
}

19/08/2009, 09h10
MasterChief78

Que ce soit par les regex, ou par la méthode bourin où l'on test tout, je suis preneur d'une solution, tant qu'elle marche :mrgreen:
19/08/2009, 09h28
lifty

Tu peut nous donner un exemple de ton tableau que l'on puisse tester ? :aie:

Alors voilà le code généré (faîtes pas attention aux noms ^^)
Pour les images boutons j'ai testé plusieurs méthodes, la première fonctionne très bien, mais j'ai pas mis à jour le reste.

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
      <table width="600" border="0" cellspacing="0" cellpadding="1">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
 
      <td width="450">&nbsp;</td>
    </tr>
 
 
    <tr id="0">
      <td colspan align="right"><input type="image" src="media/kitplus.gif" value="" onclick="affCache(0);">
        </input></td>
      <td colspan="3">Mat�riel</td>
    </tr>
        <tr id="00">
 
      <td colspan="2" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache(00)" /></td>
      <td colspan="2">Ordinateur</td>
    </tr>
        <tr id="000">
      <td colspan="3" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache(000)" /></td>
      <td width="450">Ecran</td>
    </tr>
        <tr id="0000">
 
      <td colspan="3">&nbsp;</td>
      <td width="450">First Test</td>
    </tr>
        <tr id="00023">
      <td colspan="3">&nbsp;</td>
      <td width="450">ser gser</td>
    </tr>
        <tr id="00024">
 
      <td colspan="3">&nbsp;</td>
      <td width="450">D-DAY</td>
    </tr>
        <tr id="001">
      <td colspan="3" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache(001)" /></td>
      <td width="450">Clavier/Souris</td>
    </tr>
        <tr id="00116">
 
      <td colspan="3">&nbsp;</td>
      <td width="450">543213</td>
    </tr>
        <tr id="00-15">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">wdfbwf dvswd </td>
    </tr>
        <tr id="00-120">
 
      <td colspan="2">&nbsp;</td>
      <td colspan="2">eee</td>
    </tr>
        <tr id="01">
      <td colspan="2" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache(01)" /></td>
      <td colspan="2">Imprimante</td>
    </tr>
        <tr id="010">
 
      <td colspan="3" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache(010)" /></td>
      <td width="450">Cartouche</td>
    </tr>
        <tr id="0106">
      <td colspan="3">&nbsp;</td>
      <td width="450">kjuyg </td>
    </tr>
        <tr id="01014">
 
      <td colspan="3">&nbsp;</td>
      <td width="450">MARRRRREEE</td>
    </tr>
        <tr id="01017">
      <td colspan="3">&nbsp;</td>
      <td width="450">dxhbw</td>
    </tr>
        <tr id="011">
 
      <td colspan="3" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache(011)" /></td>
      <td width="450">Autres</td>
    </tr>
        <tr id="01115">
      <td colspan="3">&nbsp;</td>
      <td width="450">OMG</td>
    </tr>
        <tr id="01-110">
 
      <td colspan="2">&nbsp;</td>
      <td colspan="2">for detroit</td>
    </tr>
        <tr id="0-12">
      <td colspan="1">&nbsp;</td>
      <td colspan="3">3</td>
    </tr>
        <tr id="1">
 
      <td colspan align="right"><input type="image" src="media/kitplus.gif" value="" onclick="affCache(1);">
        </input></td>
      <td colspan="3">CEGID</td>
    </tr>
        <tr id="10">
      <td colspan="2" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache(10)" /></td>
      <td colspan="2">Articles</td>
    </tr>
 
        <tr id="10-13">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">Last test i hope</td>
    </tr>
        <tr id="10-17">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">rg er ws</td>
    </tr>
 
        <tr id="10-113">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">s rt gstg</td>
    </tr>
        <tr id="11">
      <td colspan="2" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache(11)" /></td>
      <td colspan="2">Tiers</td>
    </tr>
 
        <tr id="11-111">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">marre ou pas ?</td>
    </tr>
        <tr id="12">
      <td colspan="2" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache(12)" /></td>
      <td colspan="2">Facture</td>
    </tr>
 
        <tr id="12-19">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">put ur hands up</td>
    </tr>
        <tr id="12-112">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">marre</td>
    </tr>
 
        <tr id="13">
      <td colspan="2" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache(13)" /></td>
      <td colspan="2">BL</td>
    </tr>
        <tr id="13-18">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">Last one before gouté</td>
    </tr>
 
        <tr id="1-14">
      <td colspan="1">&nbsp;</td>
      <td colspan="3">Nième TESTE</td>
    </tr>
      </table>

Merci d'avance :)

Voilà ça marche :aie:

Je te met le script avec le code html

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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
<script type="text/javascript">
document.getElementsByReg=function(tag,attr,reg,mod,val){
var tabReg=new Array();
var tabElts=document.body.getElementsByTagName(tag);
var TEL=tabElts.length;
 
if(!(reg instanceof RegExp)){
 
 
       if(reg.indexOf("*")>-1){
		  		reg=reg.replace(/\*/g,'.+');
 		  		reg=new RegExp(reg);
 		  		}
 		else {return	tabReg;
 			   }	
 		}
 
i=0;
while(tabElts[i]){
		if(tabElts[i][attr]){
	         if(reg.test(tabElts[i][attr])){
	         tabReg.push(tabElts[i]);}
	         }
	         reg.test("");
	i++;         
	}
return tabReg;
}
 
 
function affCache(num) {
 
//* pour recuperer tous les elements dont l'id est 0 ou 0*
//A voir si cela ne devrait pas être 0.+	
var expReg ="^"+num+"*";
table = document.getElementsByReg('tr','id',expReg);
 
 
alert(table.length);
 
for(i = 0; i < table.length; i++)
 {
 
      if((table[i].style.display == '') || !(table[i].style.display)){
        table[i].style.display = 'none';
      }
  		else if(table[i].style.display == 'none'){
        table[i].style.display = '';
    }
 }
 
 
}
</script>  
<table width="600" border="0" cellspacing="0" cellpadding="1">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
 
      <td width="450">&nbsp;</td>
    </tr>
 
 
    <tr id="0">
      <td colspan align="right">
        <img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache('0')"/>
        </td>
      <td colspan="3">Mat�riel</td>
    </tr>
        <tr id="00">
 
      <td colspan="2" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache('00')" /></td>
      <td colspan="2">Ordinateur</td>
    </tr>
        <tr id="000">
      <td colspan="3" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache('000')" /></td>
      <td width="450">Ecran</td>
    </tr>
        <tr id="0000">
 
      <td colspan="3">&nbsp;</td>
      <td width="450">First Test</td>
    </tr>
        <tr id="00023">
      <td colspan="3">&nbsp;</td>
      <td width="450">ser gser</td>
    </tr>
        <tr id="00024">
 
      <td colspan="3">&nbsp;</td>
      <td width="450">D-DAY</td>
    </tr>
        <tr id="001">
      <td colspan="3" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache('001')" /></td>
      <td width="450">Clavier/Souris</td>
    </tr>
        <tr id="00116">
 
      <td colspan="3">&nbsp;</td>
      <td width="450">543213</td>
    </tr>
        <tr id="00-15">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">wdfbwf dvswd </td>
    </tr>
        <tr id="00-120">
 
      <td colspan="2">&nbsp;</td>
      <td colspan="2">eee</td>
    </tr>
        <tr id="01">
      <td colspan="2" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache('01')" /></td>
      <td colspan="2">Imprimante</td>
    </tr>
        <tr id="010">
 
      <td colspan="3" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache('010')" /></td>
      <td width="450">Cartouche</td>
    </tr>
        <tr id="0106">
      <td colspan="3">&nbsp;</td>
      <td width="450">kjuyg </td>
    </tr>
        <tr id="01014">
 
      <td colspan="3">&nbsp;</td>
      <td width="450">MARRRRREEE</td>
    </tr>
        <tr id="01017">
      <td colspan="3">&nbsp;</td>
      <td width="450">dxhbw</td>
    </tr>
        <tr id="011">
 
      <td colspan="3" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache('011')" /></td>
      <td width="450">Autres</td>
    </tr>
        <tr id="01115">
      <td colspan="3">&nbsp;</td>
      <td width="450">OMG</td>
    </tr>
        <tr id="01-110">
 
      <td colspan="2">&nbsp;</td>
      <td colspan="2">for detroit</td>
    </tr>
        <tr id="0-12">
      <td colspan="1">&nbsp;</td>
      <td colspan="3">3</td>
    </tr>
        <tr id="1">
 
      <td colspan align="right"><input type="image" src="media/kitplus.gif" value="" onclick="affCache('1');">
        </input></td>
      <td colspan="3">CEGID</td>
    </tr>
        <tr id="10">
      <td colspan="2" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache('10')" /></td>
      <td colspan="2">Articles</td>
    </tr>
 
        <tr id="10-13">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">Last test i hope</td>
    </tr>
        <tr id="10-17">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">rg er ws</td>
    </tr>
 
        <tr id="10-113">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">s rt gstg</td>
    </tr>
        <tr id="11">
      <td colspan="2" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache('11')" /></td>
      <td colspan="2">Tiers</td>
    </tr>
 
        <tr id="11-111">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">marre ou pas ?</td>
    </tr>
        <tr id="12">
      <td colspan="2" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache('12')" /></td>
      <td colspan="2">Facture</td>
    </tr>
 
        <tr id="12-19">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">put ur hands up</td>
    </tr>
        <tr id="12-112">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">marre</td>
    </tr>
 
        <tr id="13">
      <td colspan="2" align="right"><img src="media/kitplus.gif" width="14" height="14" alt="+" onclick="affCache('13')" /></td>
      <td colspan="2">BL</td>
    </tr>
        <tr id="13-18">
      <td colspan="2">&nbsp;</td>
      <td colspan="2">Last one before gouté</td>
    </tr>
 
        <tr id="1-14">
      <td colspan="1">&nbsp;</td>
      <td colspan="3">Nième TESTE</td>
    </tr>
      </table>
 
  </body>
</html>

Cependant il y a un soucis avec ta formation des ids :D

Un exemple simple, dans ton code tu as 3 niveaux

Materiel > Ordinateur > Ecrans

Si tu clique sur Ordinateur cela va rendre Ecran invisible car il est de la forme 00x*, c'est le comportement voulu. Si tu reclique sur Ordinateur cela va le reafficher car il va détecter que l'attribut css display est à none et va le passer à vide. Encore une fois c'est le comportement voulu.:mouarf:

Par contre si tu cliques sur Ordinateur puis sur Matériel cela va ré afficher Ecran car il est de la forme 0x*, Ordinateur lui sera invisible.:aie:
J'ai pas le temps de réfléchir à une solution pour le moment :?

ps: Dans tes appels à affCache, passe le paramètre entre quotes ;)

19/08/2009, 11h55
MasterChief78

Merci beaucoup, ça marche nickel, après effectivement il faut que j'arrive à gérer ce soucis algorithmique... -> pas encore parfaitement résolu :mouarf: mais merci quand même :)

Voilà comment je pense qu'on peut régler le problème, c'est pas parfait, mais au moins pas de problème.
Si on demande de réduire un menu, ça réduira tout ce qu'il se trouve en dessous, pas de fioritude :mrgreen:
Donc j'ai modifié le code comme ça, tout se ferme bien par contre après impossible de réafficher ^^
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 function affCache(num) { //* pour recuperer tous les elements dont l'id est 0 ou 0* //A voir si cela ne devrait pas être 0.+ var expReg ="^"+num+"*"; table = document.getElementsByReg('tr','id',expReg); if((document.getElementById(num).style.display == '') || !(document.getElementById(num).style.display)){ for(i = 0; i < table.length; i++) { table[i].style.display = 'none'; } } else if(document.getElementById(num).style.display == 'none'){ for(i = 0; i < table.length; i++) { table[i].style.display = ''; } } }

19/08/2009, 12h22
lifty

Normal :mrgreen:

Code:

if((document.getElementById(num).style.display == '') || !(document.getElementById(num).style.display)){

Vu que tu ne modifie que l'élément display des élément fils, si tu fait

Code:

!(document.getElementById(num).style.display))

Cela te retournera toujours vrai donc le display des fils restera à 'none'. :aie:

Il ne faut pas faire de test d'état sur un élément que tu ne changes jamais :sm:

Ah oui effectivement :aie:, bon du coup je fais ça, c'est pas parfait mais ça marche et ça me suffit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if((table[0].style.display == '') || !(table[0].style.display)){ for(i = 0; i < table.length; i++) { table[i].style.display = 'none'; } } else { for(i = 0; i < table.length; i++) { table[i].style.display = ''; }
Merci tout le monde pour votre aide :)

19/08/2009, 13h16
lifty

Ravi de t'avoir aidé, n'oublie pas d'utiliser http://www.developpez.net/forums/ima...ons/resolu.gif sinon :fessee: