Cacher les lignes de mon tableau

**Kyvin** · 25/09/2006, 14h18

Bonjour,

Voici mon 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
 
<div id="tablecontainer">
<table>
<caption>Titre tableau</caption>
<tr><th>Titre colonne 1</th><th>Titre colonne 2</th><th>Titre colonne 3</th></tr>
<tr><td>Ligne 1</td><td>Ligne 1</td><td>Ligne 1</td></tr>
<tr><td>Ligne 2</td><td>Ligne 2</td><td>Ligne 2</td></tr>
<tr><td>Ligne 3</td><td>Ligne 3</td><td>Ligne 3</td></tr>
<tr><td>Ligne 4</td><td>Ligne 4</td><td>Ligne 4</td></tr>
<tr onclick="alert('Ma fonction: je voudrais cacher les lignes 1, 2, 3 et 4!')"><td>Sous-total 1</td><td>Sous-total 1</td><td>Sous-total 1</td></tr>
<tr><td>Ligne 5</td><td>Ligne 5</td><td>Ligne 5</td></tr>
<tr><td>Ligne 6</td><td>Ligne 6</td><td>Ligne 6</td></tr>
<tr><td>Ligne 7</td><td>Ligne 7</td><td>Ligne 7</td></tr>
<tr onclick="alert('Ma fonction: je voudrais cacher les lignes 5, 6 et 7!')"><td>Sous-total 2</td><td>Sous-total 2</td><td>Sous-total 2</td></tr>
</table>
</div>

Comment faire en Javascript pour que quand je clique sur les lignes sous-total les lignes au dessus se masquent (si elles sont visibles) ou s'affichent (si elles sont masquées)? En donnant un id à chaque tr?

Je voudrais avoir ça sous forme de fonction mais je ne sais pas trop comment m'y prendre pour que ça soit compatible avec IE et conforme en xhtml strict.

Pouvez-vous m'aider?

Merci d'avance.

A+

**merzhin** · 25/09/2006, 15h34

ce que je ferai, c'est changer la propriété display du tr sur lequel tu à cliquer.

tu peu également mettre cette propriété directement dans ta feuille de style et changer le style avec javascript

**Tdeny** · 25/09/2006, 15h38

Bonjour,
Une solution mais en méttant tout dans des DIV.
Tu peux toujours essayer en appliquant ça à des lignes de tables, des TR.
Mais je ne sais si ça marchera.

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
<html>
<script>
function chg0(obj0) {
if(document.getElementById(obj0).style.display =='none')
{document.getElementById(obj0).style.display='inline';}
else {document.getElementById(obj0).style.display='none';}
}
</script>
<div id="tablecontainer">
<div align="center;width:100%;border:1px solid black;">Titre tableau</div>
<div id="div0" border:1px solid black;display:inline;">
<div style="width="33%;float:left;text-align:center">Titre colonne 1</div>
<div style="width="33%;float:left;text-align:center">Titre colonne 2</div>
<div style="width="33%;float:left;text-align:center">Titre colonne 3</div>
</div>
<div><a href="#" onClick="chg0('div0');return false">Sous-total 1</a></div>
</html>

**Kyvin** · 25/09/2006, 15h46

Bonjour,

Merci pour ta réponse mais en mettant tout dans des div, je ne passe plus le validateur w3c.

Une autre idée?

A+

**Tdeny** · 25/09/2006, 16h11

Eh bien tu essayes de faire exactement la même chose en mettant ça sur les <tr>, en <tr id="tr0"> par exemple.
Nécessite une id.

Cacher les lignes de mon tableau

JavaScript

Discussions similaires

Partager

Partager