Afficher/Cacher des lignes de tableaux

**MasterChief78** · 18/08/2009, 16h11

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 :

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
 
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

**lifty** · 18/08/2009, 16h31

oula vaste programme

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

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

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
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

)

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

**RomainVALERI** · 18/08/2009, 16h41

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

)

**MasterChief78** · 18/08/2009, 16h44

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

**lifty** · 18/08/2009, 16h45

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

après pas sur que cela respecte la norme W3C

**Bovino** · 18/08/2009, 17h04

Envoyé par lifty

Sisi ça marche

après pas sur que cela respecte la norme W3C

Je dirais même : après, c'est certain, ça ne respecte pas les normes

mais bon...
Pour revenir à ton souci, tu peux regarder du coté de cette contribution

**MasterChief78** · 18/08/2009, 17h05

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

Code :

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

alert(table.rows.length);

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

**MasterChief78** · 18/08/2009, 17h24

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 :

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
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++;
 }
 
 
}

**MasterChief78** · 19/08/2009, 09h10

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

**lifty** · 19/08/2009, 09h28

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

**MasterChief78** · 19/08/2009, 10h03

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 :

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
      <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

**lifty** · 19/08/2009, 11h36

Voilà ça marche

Je te met le script avec le code html

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
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

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.

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.

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

**MasterChief78** · 19/08/2009, 11h55

Merci beaucoup, ça marche nickel, après effectivement il faut que j'arrive à gérer ce soucis algorithmique... -> pas encore parfaitement résolu

mais merci quand même

**MasterChief78** · 19/08/2009, 12h08

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

Donc j'ai modifié le code comme ça, tout se ferme bien par contre après impossible de réafficher ^^

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
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 = '';
 	}
}
 
 
}

**lifty** · 19/08/2009, 12h22

Normal

Code :

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

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 :

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

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

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

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

**MasterChief78** · 19/08/2009, 12h55

Ah oui effectivement

, bon du coup je fais ça, c'est pas parfait mais ça marche et ça me suffit :

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
 
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

**lifty** · 19/08/2009, 13h16

Ravi de t'avoir aidé, n'oublie pas d'utiliser

sinon

Afficher/Cacher des lignes de tableaux

JavaScript

Discussions similaires

Partager

Partager