Masquer ligne d'un tableau avec SlideToggle

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

Masquer ligne d'un tableau avec SlideToggle

jQuery

Discussions similaires

Partager

Partager