Masquer ligne d'un tableau avec SlideToggle

Version imprimable

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:

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:

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

06/01/2011, 10h07
Bovino

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

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

Code:

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>

06/01/2011, 10h29
Bovino

Essaye d'ajouter un <tbody> :?

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

Code:

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>

06/01/2011, 15h59
Remus91
Petite piste après quelques tests

click sur mon btn
Code:

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:

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:

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

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

Code:

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

06/01/2011, 16h23
SpaceFrog
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:

1 2 3 4 $("#btn_mask_ctrl").click(function(){ $('tr.control').slideToggle("slow",function(){$(this).css({display:'table_row'})}); }); });
07/01/2011, 10h56
Remus91
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:

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