11548 sujets

JavaScript, DOM et API Web HTML5

Cacher les lignes de mon tableau

Bonjour,

Voici mon code html:


<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+
Une solution enprenant les éléments <TR> du tableau :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<style type="text/css" />
</style>
<script type="text/javascript">
//Créer une variable qui contient nos lignes de tableau :
function voir(debut,fin){
table = document.getElementById('tablecontainer').getElementsByTagName('TR')
for (l=debut;l<fin+1;l++)
 {
 if(table[l].style.display == '')
 table[l].style.display = 'none';
 else table[l].style.display = ''
 }
}
</script>
</head>
<body>
<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><td><a href="javascript:onclick=voir(1,4)">Sous-total 1</a></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><td><a href="javascript:onclick=voir(6,8)">Sous-total 2</a></td></tr>
</table>
</div>
</body>
</html>

mais il y en a d'autres.
PS : les clicks dans des liens c'est pour l'accessibilité au clavier
Modifié par chmel (25 Sep 2006 - 17:56)
Sujet clos
Aller à