[Javascript] Cacher les lignes de mon tableau

Bienvenue, Invité
Merci de vous identifier ou de vous inscrire. Mot de passe perdu?

Planete-LOL

Informatique

Programmation/Coding

(1 lecteur(s)) (1) Invité(s)

Discussion autour des langages informatiques (perl/python/php/HTML/c++/visual basic...)

Page: 1

SUJET: [Javascript] Cacher les lignes de mon tableau

Outils de navigation

#38

[Javascript] Cacher les lignes de mon tableau Il y a 11 Mois, 2 Semaines Karma: 0

Bonjour,

Voici mon code html:

Code :

<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+

rguilan1

Fresh Boarder

Messages: 18

L'administrateur a désactivé l'accès public en écriture.

#39

Re: [Javascript] Cacher les lignes de mon tableau Il y a 11 Mois, 2 Semaines Karma: -10

Une solution enprenant les éléments <TR> du tableau :

Code :

<!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>

Freshcretin

Moderator

Messages: 42

L'administrateur a désactivé l'accès public en écriture.

Page: 1

Planete-LOL

Informatique

Programmation/Coding

Obtenir les derniers messages directement sur votre PC

The secret of any online business is web hosting. Select the best hosting service reading offered by justhost.