slidetoggle sur des éléments d'id dynamiques

Version imprimable

22/04/2013, 15h26
Xeuch

slidetoggle sur des éléments d'id dynamiques

Bonjour,

j'ai un tableau ayant des lignes appelées Domaines, chaque ligne domaine est suivi de trois lignes d'information sur ce domaine.

Au début je n'affiche que les lignes domaines ( les 3 lignes d'information suivant chaque ligne domaine sont cachées)

j'ai fait un slidetoggle permettant au clic sur la première cellule d'une ligne domaine d'afficher la première ligne d'information et en cliquant sur cette dernière on affiche les 2 autres lignes d'information.

Cependant vu que le nombre de lignes domaine est dynamique ( c'est une valeur qui me sera retournée à l'appelle d'une fonction).

Au niveau du jQuery je ne sais pas comment savoir laquelle des lignes domaine a été cliqué.

je ne sais pas si je peux mettre des onclick sur les premières cellules (td) des lignes qui appellerons ma fonction qui fait le slidetoggle ou pas

Merci
22/04/2013, 18h44
ABCIWEB

Je ne comprend pas où est ton problème. Si tes lignes sont déjà dans le DOM (affichées ou non affichées) alors tu peux très bien leur affecter un comportement.
A mon avis c'est plutôt la méthode qu'il te manque peut-être au niveau des sélecteurs. Mais pour t'aider il faudrait que tu nous montre un bout de code html significatif.
23/04/2013, 05h11
mainContainer

$(this) is the key !! ;)

Merci ABCIWEB et mainContainer de vos réponses.

En fait j'ai utilis2 des classeS ça marche bien quand toutes les ligneS contiennent des rowspan égales à 1. mon problème c'est que :

Quand je clique sur la cellule domaine, je dois afficher les premières lignes d'information cachées ( que j'appelle lignes cachées niveau 1) et quand je clique sur la première cellule d'une de ces lignes d'information, je dois afficher les deux autres lignes d'information cachées qui le suivent ( lignes cachées niveau 2).

peut être avec des images ce sera plus clair:

voir les liens des captures d'un exemple que j'ai fais avec une seul domaine :

http://imageshack.us/a/img841/5307/twoed.th.jpg

http://imageshack.us/a/img836/5193/fivef.th.jpg

http://imageshack.us/a/img689/5497/onefih.th.jpg

http://imageshack.us/a/img89/3720/threer.th.jpg

voici le code html :

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
<table id="tableToggle">
	<tr>
		<th colspan="3">Domaines</th>
		<th>Janvier</th>
		<th>Fevrier</th>
		<th>Mars</th>
		<th>Avril</th>
	</tr>
	<tr>
		<td colspan="3"><div class="tableToggleButton">DOMAINE A</div></td>
		<td>10</td>
		<td>10</td>
		<td>10</td>
		<td>10</td>
	</tr>
	<?php
        $i=0; // variable que j'utilise pour fabriquer les id pour les cellules dont je dois modifier les rowspan ( les cellules OPER)
        $colspanDejaAfficher="false"; // permet d'afficher une seule fois la grande cellule operation en cour
        $nblignecolspan=$nbTypesOper*3;
        
        //tableau remplie  d'operation
        foreach($tabLisOperPil as $operation){
        
//id que je mets pour pouvoir mettre le rowspan à 1 quand je ne deplie pas les lignes cachées au niveau 2, et à 3 quand je les affiche
                $prefixId="idOper";
                $idOper=$prefixId.$i;
                ?>
<!-- pour garder le nombre d'opérations afin de recréer les id des rowspan au niveau de jquery -->
		<input type="hidden" id="nbTypOperOperation" value="<?php echo $nbTypesOper;?>"/>
 
		<tr class="LigneCacheNiveau1">
			<?php 
//Afficher une seulle fois la grande cellule Operation encour qui englopera les lignes OPER et leures sous ce lignes
                        if($colspanDejaAfficher=="false"){?>
				<td rowspan="<?php echo $nblignecolspan;?>"> Operations en cours </td> <!-- son rowpans depend du nombre d'operations)-->
				<?php $colspanDejaAfficher="true";
                        }
                        ?>
			<td id="<?php echo $idOper;?>" rowspan="3"><?php echo $operation;?></td>
			<td><div class="toggleLigneCacheNiveau2">Values Encour</div></td>
			<td>10</td>
			<td>10</td>
			<td>10</td>
			<td>10</td>
		</tr>
<!-- LES 2 SOUS LIGNES CACHEES NIVEAU 2-->		
		<tr class="ligneCacheNiveau2">
			<td>values MAD</td>
			<td>10</td>
			<td>10</td>
			<td>10</td>
			<td>10</td>
		</tr>
 
		<tr class="ligneCacheNiveau2">
			<td>Values injection</td>
			<td>10</td>
			<td>10</td>
			<td>10</td>
			<td>10</td>
			<td>10</td>
		</tr>	
	<?php
        $i=$i+1;
        }
        ?>
</table>

et voici le code js

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
<script type="text/javascript">
	$(document).ready(function(){
		//recuperation du nombre d'opérations pour recreer les id
		var k= document.getElementById('nbTypOper').value;
		// cacher toutes les lignes à cachées ( ligne cahées niveau 1 et 2)
		$("#tableToggle tr.LigneCacheNiveau1" ).hide();
		$("#tableToggle tr.ligneCacheNiveau2" ).hide();
 
		//amener le rowspan des cellules OPERATION à 1 vu qu'on affiche pas les osus lignes de niveau 2
		 $('#idOperLigneOper').attr('rowspan', '1'); 
 
		 //au clic sur la cellule Domaine
		$("#tableToggle .tableToggleButton" ).click(function(){
			//afficher/cachéer les ligne cachées de niveau 1
			var next = $(this).parent().parent().nextAll('tr:has(div.tableToggleButton)').first();
			$(this).parent().parent().nextUntil(next, ".LigneCacheNiveau1").slideToggle(0); 
 
			//cacher les ligne cachées de niveau 2 ( dans le cas du replie)
			$("#tableToggle tr.ligneCacheNiveau2" ).hide();
 
			//mettre le rowspan des ligne oper à 1 dasn le cas du replie
			$('#idOperLigneOper').attr('rowspan', '1');
 
			//Au clic sur une cellule Encour d'une ligne Operation
			$("#tableToggle .toggleLigneCacheNiveau2" ).click(function(){
				//recuperation du rowspan de la ligne operation
				var row= $('#idOperLigneOper').attr('rowspan');
				//si c'est 1, on dois deplier, ==> on le mets à 3 pour deplier les 2 ligne cachées de niveau 2
				if(row==1){
					$('#idOperLigneOper').attr('rowspan', '3');
					var next = $(this).parent().parent().nextAll('tr:has(div.toggleLigneCacheNiveau2)').first(); 
					$(this).parent().parent().nextUntil(next, ".ligneCacheNiveau2").slideDown(0);   
				}
				//si c'est egal à 1 , on dois replier on repli les 2 lignes de niveau 2 et on remet le rowspan à 1
				if(row==3){
					var next = $(this).parent().parent().nextAll('tr:has(div.toggleLigneCacheNiveau2)').first();
					$(this).parent().parent().nextUntil(next, ".ligneCacheNiveau2").slideUp(0);   	
					$('#idOperLigneOper').attr('rowspan', '1');
				}
			}); 
		});
 
	});
 
</script>

Mon problème actuellement c'est que même si je reconstitue les id des lignes OPER pour modifier la valeur de leurs rowspan ( le mettre à 1 quand je replie et à 3 quand je déplie) je ne saurais pas de quelle OPER il s'agit vu que j'utilise des class.

j'ai essayer d'utiliser prev() pour que qu'au sur la cellule permettant d'afficher les lignes cachées de niveau 2, avant de les afficher je remonte prendre le td precedent pour mettre son rowspan à 3 ( idem quand je replie ou je le met à 1) , mais ça ne marche pas.

Merci de votre aide

C'est bon j'ai trouvé ;)

En fait j'ai ajouté l'attribut id à mon td qui permet d'afficher les ligne de niveau 2 et cet attribut n'est rien d'autre que la valeur de la variable qui me premettra de reconstitué l'id de la ligne OPER en le concaténant avec idOper

Code:

1
2
3
4
$prefixId="idOper";
$idOper=$prefixId.$i;
<td id="<?php echo $idOper;?>" rowspan="3"><?php echo $operation;?></td>
<td><div id="<?php echo $i;?>" class="toggleLigneCacheNiveau2">value encour</div></td>

et le js donne :

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
<script type="text/javascript">
$(document).ready(function(){
	//recuperation du nombre d'operation pour recreer les id
	var k= document.getElementById('nbTypOper').value;
	// cacher toute les ligne à cachés ( ligne cahées niveau 1 et 2)
	$("#tableToggle tr.LigneCacheNiveau1" ).hide();
	$("#tableToggle tr.ligneCacheNiveau2" ).hide();
	for(var m=0;m<k;m++){
		var idOp="idOper"+m;
		$('#'+idOp).attr('rowspan', '1');
	}
 
	//amener le rowspan des cellules OPERATION à 1 vu qu'on affiche pas les osus lignes de niveau 2
	 $('#idOperLigneOper').attr('rowspan', '1'); 
 
	 //au clic sur la cellule Domaine
	$("#tableToggle .tableToggleButton" ).click(function(){
		//afficher/cachéer les ligne cachées de niveau 1
		var next = $(this).parent().parent().nextAll('tr:has(div.tableToggleButton)').first();
		$(this).parent().parent().nextUntil(next, ".LigneCacheNiveau1").slideToggle(0); 
 
		//cacher les ligne cachées de niveau 2 ( dans le cas du repli)
		$("#tableToggle tr.ligneCacheNiveau2" ).hide();
 
		//mettre le rowspan des ligne oper à 1 dasn le cas du repli
		for(var m=0;m<k;m++){
			var idOp="idOper"+m;
			$('#'+idOp).attr('rowspan', '1');
		}
 
		//Au clic sur une cellule Encour d'une ligne Operation
		$("#tableToggle .toggleLigneCacheNiveau2" ).click(function(){
 
			var num=$(this).attr('id');
			alert(num);
			var id="idOper"+num;
			alert(id);
			var row= $('#'+id).attr('rowspan');
			//si c'est 1, on dois deplier, ==> on le mets à 3 pour deplier les 2 ligne cachées de niveau 2
			if(row==1){
				$('#idOperLigneOper').attr('rowspan', '3');
				var next = $(this).parent().parent().nextAll('tr:has(div.toggleLigneCacheNiveau2)').first(); 
				$(this).parent().parent().nextUntil(next, ".ligneCacheNiveau2").slideDown(0);   
			}
			//si c'est egal à 1 , on dois replier on repli les 2 lignes de niveau 2 et on remet le rowspan à 1
			if(row==3){
				var next = $(this).parent().parent().nextAll('tr:has(div.toggleLigneCacheNiveau2)').first();
				$(this).parent().parent().nextUntil(next, ".ligneCacheNiveau2").slideUp(0);   	
				$('#idOperLigneOper').attr('rowspan', '1');
			}
		}); 
	});
 
});
 
</script>

Mercii