Cacher les lignes de mon tableau

Version imprimable

Bonjour,

Voici mon code html:
Code:

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+

25/09/2006, 15h34
merzhin

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

des DIV

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:

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>

25/09/2006, 15h46
Kyvin

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+
25/09/2006, 16h11
Tdeny

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.