Masquer ligne d'un tableau avec SlideToggle [Résolu]

Remus91 · 06/01/2011, 09h28

Bonjour
J'aurais une requête à vous soumettre concernant l'utilisation du slidetoogle pour un tableau.

Le bute étant de masquer une une ligne sur clic d'un bouton.
Sur ce même bouton il devra être possible de ré afficher cette ligne.

Voila mon tableau 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
17
18
19
20
21
22
<table border="1">
		<th> Titre</th>
		<th> Titre</th>
		<th> Titre</th>
		<th> Titre</th>
 
		<tr class="control">
			<td> controle </td>
			<td> controle </td>
			<td> controle </td>
			<td> controle </td>
		</tr>
		<tr>
			<td> ligne 1 </td>
			<td> ligne 2 </td>
			<td> ligne 3 </td>
			<td> ligne 4 </td>
		</tr>
 
</table>
 
<input type="button" id="btn_mask_ctrl" value="mask contrôle"></input>

et mon code javascript qui doit masquer ma ligne controle

Code :

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

1
2
3
	$("#btn_mask_ctrl").click(function(){
		$('tr.control').slideToggle("slow");
	});

Elle ce masque bien, mais lors du ré affichage ma ligne est imbriqué dans la première cellule du tableau.

Merci de vos lumières.

Rémy

Bovino · 06/01/2011, 10h07

Il te manque un <tr> pour englober tes <th>.

Remus91 · 06/01/2011, 10h11

Oups... bête erreur de ma part (données de test), cela étant cela ne corrige pas mon problème.

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
<table border="1">
		<tr>
			<th> Titre</th>
			<th> Titre</th>
			<th> Titre</th>
			<th> Titre</th>
		</tr>
		<tr class="control">
			<td> controle </td>
			<td> controle </td>
			<td> controle </td>
			<td> controle </td>
		</tr>
		<tr>
			<td> ligne 1 </td>
			<td> ligne 2 </td>
			<td> ligne 3 </td>
			<td> ligne 4 </td>
		</tr>
 
</table>

Bovino · 06/01/2011, 10h29

Essaye d'ajouter un <tbody>

Remus91 · 06/01/2011, 10h38

Le problème persiste et ne faibli pas....
thead et tbody ne change rien à mon effet javascript

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
<table border="1">
		<thead>
			<tr>
				<th> Titre</th>
				<th> Titre</th>
				<th> Titre</th>
				<th> Titre</th>
			</tr>
		</thead>
		<tbody>
			<tr class="control">
				<td> controle </td>
				<td> controle </td>
				<td> controle </td>
				<td> controle </td>
			</tr>
			<tr>
				<td> ligne 1 </td>
				<td> ligne 2 </td>
				<td> ligne 3 </td>
				<td> ligne 4 </td>
			</tr>
		</tbody>
 
</table>

Remus91 · 06/01/2011, 15h59

Petite piste après quelques tests

click sur mon btn

Code :

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

1
2
3
4
5
6
<tr class="control" style="display: none;">
				<td> controle </td>
				<td> controle </td>
				<td> controle </td>
				<td> controle </td>
			</tr>

Cela masque la ligne de mon tableau.
Ensuite quand je clic une seconde fois sur mon btn (pour ré afficher la ligne)

Code :

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

1
2
3
4
5
6
<tr class="" style="display: block;">
				<td> controle </td>
				<td> controle </td>
				<td> controle </td>
				<td> controle </td>
			</tr>

Le style de ma class passe en display block et perd le nom de la class.

J'ai mis un addClass dans mon toogle pour voir le résultat :

Code :

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

$('tr.control').addClass("control");

mon <tr> reprend bien la class = control mais reste en display block

SpaceFrog · 06/01/2011, 16h13

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
<script type="text/javascript">
$(function(){
$("#btn_mask_ctrl").click(function(){
		$('tr.control').slideToggle("slow");
	});
 
 
	  });
</script>
</head>
<body>
<table border="1">
		<thead>
			<tr>
				<th> Titre</th>
				<th> Titre</th>
				<th> Titre</th>
				<th> Titre</th>
			</tr>
		</thead>
		<tbody>
			<tr class="control">
				<td> controle </td>
				<td> controle </td>
				<td> controle </td>
				<td> controle </td>
			</tr>
			<tr>
				<td> ligne 1 </td>
				<td> ligne 2 </td>
				<td> ligne 3 </td>
				<td> ligne 4 </td>
			</tr>
		</tbody>
 
 
</table>
<input type="button" id="btn_mask_ctrl" value="mask contrôle"></input>
 
</body>
</html>

a part l'effet slide inopérant mais la ligne est toujours a sa place et avec la bonne class...

SpaceFrog · 06/01/2011, 16h23

D'après ce que j'ai pu trouver, il semblerait que le slideToggle retourne un display bloc au réaffichage ...
il suffirait alors de rendre au tr sont display table-row dans le callback

Code :

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

1
2
3
4
$("#btn_mask_ctrl").click(function(){
		$('tr.control').slideToggle("slow",function(){$(this).css({display:'table_row'})});
	});
	  });

Remus91 · 07/01/2011, 10h56

SlideToogle n'étant pas compatible IE.... j'ai été dans l'obligation de changer de méthode jQuery.
J'ai donc décidé d'utiliser le HIDE et SHOW.

Cependant SHOW présente le même problème que le SlideToogle, il par les données en Display:Block.

Pour résoudre ce petit problème j'ai opté pour un removeAttr.

Code :

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

1
2
3
4
5
6
7
$("#btn_mask_ctrl").click(function(){
		$('tr.control').hide();
	});
 
	$("#btn_mask_ctrl2").click(function(){
		$('tr.control').removeAttr("style");	
	});

Bon certes il n'y a pas d'effet "kikoo" mais c'est fonctionnel.

maintenant il me reste plus qu'à grouper ça dans 1 seul bouton.

Bonne journée

06/01/2011, 10h07	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 802 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 802 Points : 35 807 Points : 35 807	Il te manque un <tr> pour englober tes <th>. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

06/01/2011, 10h29	#4
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 802 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 802 Points : 35 807 Points : 35 807	Essaye d'ajouter un <tbody> __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email