cacher toutes les lignes ayant un identificateur commun

**destructive** · 30/04/2007, 12h14

salut tout le monde,

je voulais écrire une fonction permettant de cacher toutes les lignes de tableaux dans une page html, cette fonction va scanner tout la page et à chaque fois qu'elle rencontre une ligne dont l'identificateur est du type id="xxx" elle va le cacher s'il est affiché ou le contraire.

quelqu'un a une idée ?

**Bisûnûrs** · 30/04/2007, 12h17

Ca veut dire quoi ayant un identificateur du type id="xxx" ?

Un id est unique, rappelons-le ...

**destructive** · 30/04/2007, 12h25

c vrai j'ai oublié ça !! mon problème que j'ai écrit la fonction suivante qui fait l'affaire

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
 
function clicMenu(num) {
 
var i = 1;
while ( i <= num)
{ 
   var m = document.getElementById("menu"+i);
 
   if(m.style.display == "none") {
 
     m.style.display = "";
 
   }
 
   else {
 
     m.style.display = "none";
 
   }
   i++;
 }
 }

mais on doit lui passer le nombre de lignes à cacher en paramètre, or mon problème c'est que le code html est généré grâce à un fichier écrit en perl que j'ai trouvé beaucoup de problèmes à y introduire une variable qui compte le nombre de lignes, je veux une solution pour que la fonction cache toutes les lignes d'un seul coup sans avoir à connaître leur nombre ..

merci.

**Bisûnûrs** · 30/04/2007, 12h28

Et pour replacer ton paramètre, tu peux utiliser ça :

Code :

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

var n = document.getElementById('iddetontableaudonttuveuxcachertoutesleslignes').getElementsByTagName('tr').length;

**destructive** · 30/04/2007, 14h11

salut,
j'ai modifié la fonction ainsi ais ça marche 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
 
 
 function clicMenu() {
 var num = document.getElementByTagName("table").getElementsTagName("tr").length;
 
 var i = 1;
while ( i <= num)
{ 
   var m = document.getElementById("menu"+i);
 
   if(m.style.display == "none") {
 
     m.style.display = "";
 
   }
 
   else {
 
     m.style.display = "none";
 
   }
   i++;
 }
 }

des suggestions ?

**Bisûnûrs** · 30/04/2007, 14h21

getElementByTagName n'existe pas.
getElementsTagName n'extiste pas.

C'est getElementsByTagName et c'est un tableau.

Donc si tu n'as qu'un seul <table> dans ta page :

Code :

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

var num = document.getElementsByTagName("table")[0].getElementsByTagName("tr").length;

**destructive** · 30/04/2007, 14h38

salut,

en faites je travaille sur un document comportant plusieurs tableaux, mais quand j'ai essayé la fonction avec le cas d'un seul j'obtient rien et ça m'embête car le code me paraît correct, voilà tout le code, le but est de cacher les lignes avec l'dentifiant "menu x" :

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
 
 <html>
 <head>
 	<title>Untitled</title>
 <script>
 
 function clicMenu() {
 var num = document.getElementsByTagName("TABLE")[0].getElementsByTagName("tr").length;
 
 var i = 1;
 while ( i <= num)
 { 
   var m = document.getElementById("menu"+i);
 
   if(m.style.display == "none") {
 
     m.style.display = "";
 
   }
 
   else {
 
     m.style.display = "none";
 
   }
   i++;
 }
 }
 
 </script>
 </head>
 
 <body>
 <TABLE ID="con" BORDER="1" CELLPADDING="1" CELLSPACING="0" WIDTH="100%">
 <tr><a name="table_name"></a><td bgcolor=blue> <A HREF="path_for_data"><FONT SIZE=2><img src="path_for_image" width="15" height="10" border="0"></FONT></A> &nbsp; <FONT COLOR=FFFFFF><B>Results</B></FONT></td>
 <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context1</B></FONT></td>
 <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context2</B></FONT></td>
 <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context3</B></FONT></td>
 <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context4</B></FONT></td>
 <td bgcolor=blue align=center><FONT COLOR=FFFFFF><B>context5</B></FONT></td>
 </tr>
 <tr ><td colspan=6 align=left><B> <a href="javascript:void(0)" onclick="clicMenu();">tests</a></B></td></tr>
 <tr id="menu1" >
 <td align=left><A HREF="test1"><FONT SIZE=2><img src="path_for_image" width="15" height="10" border="0"></FONT></A> &nbsp; <A HREF="" ><FONT SIZE=2> 
 
   porcedure1
                      </FONT></A> </td>
 <td align=center>45</td>
 <td align=center><FONT COLOR="green"><B>45</B></FONT></td>
 <td align=center><FONT COLOR="green"><B>100.0</B></FONT></td>
 <td align=center><FONT SIZE=2>date</FONT></td>
 <td align=center><FONT SIZE=2> time</FONT></td>
 </tr>
 <tr id="menu2">
 <td align=left><A HREF="test2"><FONT SIZE=2><img src="path_for_image" width="15" height="10" border="0"></FONT></A> &nbsp; <A HREF=""><FONT SIZE=2>procedure2</FONT></A> </td>
 <td align=center>45</td>
 <td align=center><FONT COLOR="green"><B>45</B></FONT></td>
 <td align=center><FONT COLOR="green"><B>100.0</B></FONT></td>
 <td align=center><FONT SIZE=2>date</FONT></td>
 <td align=center><FONT SIZE=2> time</FONT></td>
 </tr>
 <tr><td align=left> <B>results1</td>
 <td align=center>90</td>
 <td align=center><FONT COLOR=orange><B>89</B></FONT></td>
 <td align=center><FONT COLOR=orange><B>98.9</B></FONT></td>
 <td align=center> - </td>
 <td align=center><FONT SIZE=2> total_time</FONT></td>
 </tr>
 <tr><td colspan=6 align=left><B>results2</td>
 <tr><td colspan=6 align=left><B>results3</B>  </td>
 <tr><td colspan=6 align=left><B>Statistics</B></td>
 <tr><td align=left><FONT SIZE=2>Total  </FONT></A></td>
 <td align=center>90</td>
 <td align=center><FONT COLOR=orange><B>89</B></FONT></td>
 <td align=center><FONT COLOR=orange><B>98.9</B></FONT></td>
 <td align=center> - </td><td align=center><FONT SIZE=2> total_times</FONT></td>
 </tr>
 </table>
 
 </body>
 </html>

merci d'avance

**Bisûnûrs** · 30/04/2007, 14h44

Je viens de faire un c/c de ton code et il fonctionne, à un détail près.

Tu devrais faire comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
while ( i <= num){ 
   var m = document.getElementById("menu"+i);
   if(m){
      if(m.style.display == "none") {
         m.style.display = "";
      }
      else {
         m.style.display = "none";
      }
   }
   i++;
}

**destructive** · 30/04/2007, 15h00

pourtant quand j'essaye d'exéuter ça j'obtient cette erreur dans la définition de var num " object doesn't support this property or method" est ce une erreur d'utilisation de méthodes ?

**LEK** · 30/04/2007, 15h28

Ton navigateur ne supporte probablement pas la notation...
En reprenant ta fonction initiale, et en étant sûr que le script perl ne produie pas de trous dans la séquence des id : tu peux sans doute procéder ainsi :

Code :

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

1
2
3
4
5
6
7
8
9
10
function clicMenu() {
var i = 1;
var m;
 while (  document.getElementById("menu"+i) )
 { 
   m = document.getElementById("menu"+i) ;
   m.style.display = (m.style.display=="none")?"":"none";
   i++;
  }
}

non ?

**destructive** · 30/04/2007, 16h09

ça marche cette fois .. merci pour vous deux !!

cacher toutes les lignes ayant un identificateur commun

JavaScript

Discussions similaires

Partager

Partager