slidetoggle masque/afficher ligne tableau

**Xeuch** · 18/04/2013, 21h33

Bonjour les amis,

j'ai un problème avec slidetoggle et mon tableau car ça s'affiche très mal quand j'utilise des rowspan ou colspan.

je m'explique: en fait je dois afficher la fiche semestrielle d'un étudiant.

Au début je dois avoir juste le nom de l’étudiant affiché et les moyenne généraux par mois .en cliquant sur le nom, je dois voir

la liste des matière avec pour chaque matière juste les moyennes obtenues. et en cliquant sur la moyenne de chaque matière je dois afficher la note 1 et la note 2 qui de l’étudiant

Cependant vu que pour chaque ligne contenant la moyenne d'une matière j'ai fais un rowspan exemple pour math

Code html :

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

<span><td rowspan="3">Math</td></span>

quand je hide les notes qui lui sont rattachées, il intègre les 2 matière qui le suis comme des lignes de ses notes ce qui me crée des décalages très moches.

je fais des captures d’écran pour les poster pour que vous compreniez mieux mon problème mais je n'ai les ai pas en ligne donc je ne peux pas les poster

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
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
108
<table id="tableToggle">
	<caption>Fiche Semestre</caption>
	<tr>
	   <th colspan="3">Nom et info </th>
	   <th>Septembre</th>
	   <th>Octobre</th>
	   <th>Novembre</th>
	   <th>Decembre</th>
	   <th>Janvier</th>
	</tr>
	<tr>
		<td colspan="3"><div class="tableToggleButton">Marie GUY</div></td>
	   <td>10</td>
	   <td>12</td>
	   <td>11.5</td>
	   <td>15</td>
	   <td>12</td>
	</tr>
	<tr class="toggleable">
		<td colspan="3">moyenne en ETP</td>
	   <td>10</td>
	   <td>12</td>
	   <td>11.5</td>
	   <td>15</td>
	   <td>12</td>
   </tr>
	<tr class="toggleable">
		<td rowspan="9">Liste des Matieres</td>
		<td rowspan="3">Math</td>
		<td><div class="toggleMath">Moyenne</td>
	   <td>10</td>
	   <td>12</td>
	   <td>11.5</td>
	   <td>15</td>
	   <td>12</td>
   </tr>
   <tr class="toggleableMath">
	   <td>Note 1er Devoir</td>
	   <td>10</td>
	   <td>12</td>
	   <td>11.5</td>
	   <td>15</td>
	   <td>12</td>
   </tr>
	<tr class="toggleableMath">
	   <td>Note 2em Devoir</td>
	   <td>10</td>
	   <td>12</td>
	   <td>11.5</td>
	   <td>15</td>
	   <td>12</td>
   </tr>
 
   <tr class="toggleable">
		<td rowspan="3">PC</td>
		<td><div class="togglePC">Moyenne</td>
		<td>10</td>
		<td>12</td>
		<td>11.5</td>
		<td>15</td>
		<td>12</td>
   </tr>
   <tr class="toggleablePC">
	   <td>Note 1er Devoir</td>
	   <td>10</td>
	   <td>12</td>
	   <td>11.5</td>
	   <td>15</td>
	   <td>12</td>
   </tr>
	<tr class="toggleablePC">
	   <td>Note 2em Devoir</td>
	   <td>10</td>
	   <td>12</td>
	   <td>11.5</td>
	   <td>15</td>
	   <td>12</td>
   </tr>
 
	<tr class="toggleable">
		<td rowspan="3">SVT</td>
		<td><div class="toggleSVT">Moyenne</td>
		<td>10</td>
		<td>12</td>
		<td>11.5</td>
		<td>15</td>
		<td>12</td>
   </tr>
 
   <tr class="toggleableSVT">
	   <td>Note 1er Devoir</td>
	   <td>10</td>
	   <td>12</td>
	   <td>11.5</td>
	   <td>15</td>
	   <td>12</td>
   </tr>
	<tr class="toggleableSVT">
	   <td>Note 2em devoir</td>
	   <td>10</td>
	   <td>12</td>
	   <td>11.5</td>
	   <td>15</td>
	   <td>12</td>
   </tr>
 
 
</table>

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
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 
<script type="text/javascript">
	$(document).ready(function(){
		$("#tableToggle tr.toggleable" ).hide();
		$("#tableToggle tr.toggleableMath" ).hide();
		$("#tableToggle tr.toggleablePC" ).hide();
		$("#tableToggle tr.toggleableSVT" ).hide();
 
		$("#tableToggle .tableToggleButton" ).click(function(){
			var next = $(this).parent().parent().nextAll('tr:has(div.tableToggleButton)').first();
 
			$(this).parent().parent().nextUntil(next, ".toggleable").slideToggle('medium'); 
			$("#tableToggle tr.toggleableMath" ).hide();
			$("#tableToggle tr.toggleablePC" ).hide();
			$("#tableToggle tr.toggleableSVT" ).hide();
		}); 
 
		 $("#tableToggle .toggleMath" ).click(function(){
			var next = $(this).parent().parent().nextAll('tr:has(div.toggleMath)').first();
 
			$(this).parent().parent().nextUntil(next, ".toggleableMath").slideToggle('medium');                                                                                           
		}); 
 
		 $("#tableToggle .togglePC" ).click(function(){
			var next = $(this).parent().parent().nextAll('tr:has(div.togglePC)').first();
 
			$(this).parent().parent().nextUntil(next, ".toggleablePC").slideToggle('medium');                                                                                           
		}); 
 
		 $("#tableToggle .toggleSVT" ).click(function(){
			var next = $(this).parent().parent().nextAll('tr:has(div.toggleSVT)').first();
 
			$(this).parent().parent().nextUntil(next, ".toggleableSVT").slideToggle('medium');                                                                                           
		}); 
 
 
	});
 
</script>

Merci de votre aide.

**Xeuch** · 19/04/2013, 11h47

J'ai trouvé tout seul au final

En fait, j'ai décomposé le slidetoggle en deux partie slideUp et slideDown et selon le cas : en slidedown je met le rowspan en 3 et en slideUp je le remet à 1.

voici le code, quelqu'un en aura besoin un jour peut etre:

math== OPER1
PC== OPER2
SVT==OPER3

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
 
 
<script type="text/javascript">
	$(document).ready(function(){
		$("#tableToggle tr.toggleable" ).hide();
		$("#tableToggle tr.toggleableMath" ).hide();
		$("#tableToggle tr.toggleablePC" ).hide();
		$("#tableToggle tr.toggleableSVT" ).hide();
		$('#idOper1').attr('rowspan', '1');
		$('#idOper2').attr('rowspan', '1');
		$('#idOper3').attr('rowspan', '1');
 
		$("#tableToggle .tableToggleButton" ).click(function(){
			var next = $(this).parent().parent().nextAll('tr:has(div.tableToggleButton)').first();
			$(this).parent().parent().nextUntil(next, ".toggleable").slideToggle('medium'); 
			$("#tableToggle tr.toggleableMath" ).hide();
			$("#tableToggle tr.toggleablePC" ).hide();
			$("#tableToggle tr.toggleableSVT" ).hide();
			$('#idOper1').attr('rowspan', '1');
			$('#idOper2').attr('rowspan', '1');
			$('#idOper3').attr('rowspan', '1');
		}); 
 
		 $("#tableToggle .toggleMath" ).click(function(){
			var row= $('#idOper1').attr('rowspan');
			//alert(row);
			if(row==1){
				$('#idOper1').attr('rowspan', '3');
				var next = $(this).parent().parent().nextAll('tr:has(div.toggleMath)').first(); 
				$(this).parent().parent().nextUntil(next, ".toggleableMath").slideDown('medium');   
			}
			if(row==3){
				var next = $(this).parent().parent().nextAll('tr:has(div.toggleMath)').first();
				$(this).parent().parent().nextUntil(next, ".toggleableMath").slideUp('medium');   	
				$('#idOper1').attr('rowspan', '1');
			}
		}); 
 
		 $("#tableToggle .togglePC" ).click(function(){
			var row= $('#idOper2').attr('rowspan');
			//alert(row);
			if(row==1){
				$('#idOper2').attr('rowspan', '3');
				var next = $(this).parent().parent().nextAll('tr:has(div.togglePC)').first();  
				$(this).parent().parent().nextUntil(next, ".toggleablePC").slideDown('medium'); 
			}
			if(row==3){
				var next = $(this).parent().parent().nextAll('tr:has(div.togglePC)').first(); 
				$(this).parent().parent().nextUntil(next, ".toggleablePC").slideUp('medium'); 
				$('#idOper2').attr('rowspan', '1');
			}
 
 
		}); 
 
		 $("#tableToggle .toggleSVT" ).click(function(){
			var row= $('#idOper3').attr('rowspan');
			//alert(row);
			if(row==1){
				$('#idOper3').attr('rowspan', '3');
				var next = $(this).parent().parent().nextAll('tr:has(div.toggleSVT)').first();
				$(this).parent().parent().nextUntil(next, ".toggleableSVT").slideToggle('medium'); 
			}
			if(row==3){	
				var next = $(this).parent().parent().nextAll('tr:has(div.toggleSVT)').first();
				$(this).parent().parent().nextUntil(next, ".toggleableSVT").slideUp('medium');  
				$('#idOper3').attr('rowspan', '1');
			}
		}); 	
	});
 
</script>

slidetoggle masque/afficher ligne tableau

jQuery

Vue hybride

Discussions similaires

Partager

Partager