masquer/afficher plusieurs lignes d'un tableau jquery

**Xeuch** · 21/03/2013, 08h44

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 html :

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

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

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 ?

**dragonno** · 21/03/2013, 09h35

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.

**danielhagnoul** · 21/03/2013, 10h37

Bonjour

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

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

**Bovino** · 21/03/2013, 10h51

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

masquer/afficher plusieurs lignes d'un tableau jquery

jQuery

Discussions similaires

Partager

Partager