masquer/afficher plusieurs lignes d'un tableau jquery

Version imprimable

Bonjour,

Voici mon probleme :

j'iutilise slidetoggle() de jquery pour pouvoir masquez plusieurs ligne (fille)d'un tableau au clique sur la ligne mère.

cependant quand je clique sur la ligne mère il m'affiche juste la premier ligne fille pas les autres (ses soeur) en plus la ligne qui s'affiche apparaît complétement dans une seule cellule <th>.

voici mon code

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!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">
	<head>
	   <title></title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<style type="text/css">
                </style>
	</head>
	<link rel="stylesheet" href="styleTable.css" />
	<h2>My slide</h2>
	<body>
		<br />
		<table id="tableToggle">
			<caption>Passagers du vol 377</caption>
		    <tr>
			   <th>Nom</th>
			   <th>Âge</th>
			   <th>Pays</th>
		    </tr>
			<tr>
				<td><div class="tableToggleButton">Carmen</div></td>
				<td>33 ans</td>
			   <td>Espagne</td>
			</tr>
			<tr class="toggleable">
			   <td>CarmenSOEUR_1</td>
			   <td>33 ans_1</td>
			   <td>Espagne_1</td>
		   </tr>
			<tr class="toggleable">
			   <td>CarmenSOEUR_2</td>
			   <td>33 ans_2</td>
			   <td>Espagne_2</td>
		   </tr>
 
			<tr>
				<td><div class="tableToggleButton">Michelle</div></td>
				<td>26 ans</td>
			   <td>États-Unis</td>
			</tr>
 
			<tr class="toggleable">
			   <td>MichelleSOEUR_1</td>
			   <td>26 ans_1</td>
			   <td>États-Unis_1</td>
		   </tr>
		   <tr class="toggleable">
			   <td>MichelleSOEUR_2</td>
			   <td>26 ans_2</td>
			   <td>États-Unis_2</td>
		   </tr>
 
		</table>
 
		<script type="text/javascript" src="js/jquery.js"></script>
	</body>
</html>

Code:

1
2
3
4
5
$(document).ready(function(){
	$("#tableToggle tr.toggleable" ).hide();
	$("#tableToggle .tableToggleButton" ).click(function(){
		$(this).parent().parent().next('tr').slideToggle('medium');                                    });
});

j'ai vu dans quelque part que (.nextAll().first()) et (.nextUntil()) pourrait le faire mais je ne sais pas comment le faire.
Avez vous des solution ?

21/03/2013, 08h35
dragonno

Essaie de mettre un display:none sur une ligne de table ça marche bien.

Tu donnes une classe à toutes les lignes sur lesquelles tu veux agir et tu appelle un script avec le onclick qui changera le display de la classe.

Bonjour

Avec les lignes d'un "table", je constate que la méthode slideToggle ne fonctionne pas correctement, exemple :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-1.9.1.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
					$( "#btn" ).on( "click", function(){
						$( "#tableToggle > tbody > tr.toggleable" ).slideToggle( 2000 );
					});
 
				});
 
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		tr.toggleable { position: relative; height: 6rem; }
		td { width: 8rem; padding: 0.6rem; border: 0.1rem dotted grey; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
		<button id="btn">Toggle</button>
 
		<table id="tableToggle">
			<caption>Passagers du vol 377</caption>
			<thead>
				<tr>
				   <th>Nom</th>
				   <th>Âge</th>
				   <th>Pays</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<div class="tableToggleButton">Carmen</div>
					</td>
					<td>33 ans</td>
					<td>Espagne</td>
				</tr>
				<tr class="toggleable">
					<td>CarmenSOEUR_1</td>
					<td>33 ans_1</td>
					<td>Espagne_1</td>
				</tr>
				<tr class="toggleable">
					<td>CarmenSOEUR_2</td>
					<td>33 ans_2</td>
					<td>Espagne_2</td>
				</tr>
				<tr>
					<td>
						<div class="tableToggleButton">Michelle</div>
					</td>
					<td>26 ans</td>
					<td>États-Unis</td>
				</tr>
				<tr class="toggleable">
					<td>MichelleSOEUR_1</td>
					<td>26 ans_1</td>
					<td>États-Unis_1</td>
				</tr>
				<tr class="toggleable">
					<td>MichelleSOEUR_2</td>
					<td>26 ans_2</td>
					<td>États-Unis_2</td>
				</tr>
			</tbody>
		</table>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-03-21T09:27:34.607+01:00" pubdate>2013-03-21T09:27:34.607+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

21/03/2013, 09h51
Bovino

Les animations n'ont jamais été destinées à s'appliquer aux tables !