Discussion :

[Remus91]

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]

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

[Remus91]

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]

Essaye d'ajouter un <tbody>

[Remus91]

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]

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