Comment cacher/montrer un ensemble de lignes

**bertra** · 16/05/2008, 10h49

Bonjour,
J'ai dans une page HTML un tableau dans lequel j'ai un ensemble de lignes que j'aimerai rendre visible/invisible suite à une action utilisateur. afin de gagner de la place.
Je ne connais pas encore bien js.
J'ai trouvé ce code sur le net.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Titre</title>
 
</head>
<body>
<script>
function afficheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='visible';
    document.getElementById(baliseId).style.display='block';
    }
  }
 
function cacheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='hidden';
    document.getElementById(baliseId).style.display='none';
    }
  }
 
cacheId('contenu');
// si JavaScript est disponible, cache le contenu dès le
// chargement de la page. Sans JavaScript, le contenu sera
// affiché.
</script>
 
<td><a href="javascript:afficheId('contenu')">Visible</a></td>
<td><a href="javascript:cacheId('contenu');">Fermer</a>
</td>
<div id="contenu">
ContenuACacher1<br>
ContenuACacher2<br>
ContenuACacher3<br>
</div>
<div>Pied</div>
</body>
</html>

Cependant ça ne marche que si on cache/montre des éléments <div>.
Comment faire pour faire la même chose avec un ensemble de <tr> ?

**le_chomeur** · 16/05/2008, 11h00

voila

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Titre</title>
 
</head>
<body>
<script>
function afficheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='visible';
    document.getElementById(baliseId).style.display='block';
    }
  }
 
function cacheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='hidden';
    document.getElementById(baliseId).style.display='none';
    }
  }
</script>
 <table border="1">
 <tr id="ligne1">
<td><a href="javascript:cacheId('ligne1');">Fermer</a></td></tr>
<tr id="ligne2"><td><a href="javascript:cacheId('ligne2');">Fermer</a></td></tr>
</table>
 
<a href="javascript:afficheId('ligne1')">Visible ligne 1</a><br />
<a href="javascript:afficheId('ligne2')">Visible ligne 2</a>
</body>
</html>

**Auteur** · 16/05/2008, 11h20

Code javascript :

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

1
2
3
 
    document.getElementById(baliseId).style.visibility='visible';
    document.getElementById(baliseId).style.display='block';

soit tu utilises la propriété display soit la propriété visibility mais pas les deux à la fois, c'est inutile.

**le_chomeur** · 16/05/2008, 11h35

c pas faux ...
j'ai juste réutilisé son code :p

**bertra** · 16/05/2008, 12h51

Envoyé par le_chomeur

voila

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Titre</title>
 
</head>
<body>
<script>
function afficheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='visible';
    document.getElementById(baliseId).style.display='block';
    }
  }
 
function cacheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='hidden';
    document.getElementById(baliseId).style.display='none';
    }
  }
</script>
 <table border="1">
 <tr id="ligne1">
<td><a href="javascript:cacheId('ligne1');">Fermer</a></td></tr>
<tr id="ligne2"><td><a href="javascript:cacheId('ligne2');">Fermer</a></td></tr>
</table>
 
<a href="javascript:afficheId('ligne1')">Visible ligne 1</a><br />
<a href="javascript:afficheId('ligne2')">Visible ligne 2</a>
</body>
</html>

Merci pour ce code et cette réactivité

Seulement c'est un ensemble de lignes que je veux cacher/rendre visible.... comment faire une regroupement ?

**le_chomeur** · 16/05/2008, 15h43

fait un getElementsByTagName('tr') sur ton tableau
tu va récupèrer une liste de ligne , sur lesquelles tu boucles et tu appliques les fonctions pour masquer

**veevee** · 16/05/2008, 17h50

Bonsoir,

j'avais pondu un script JS pour cacher/afficher un compteur
On peut le modifier (à peine) pour cacher/afficher tout élément.

Expliqué ici en fin de discussion

@+

Comment cacher/montrer un ensemble de lignes

JavaScript

Discussions similaires

Partager

Partager