Discussion :

[flavors]

Bonjour.
Hier j'avais posté un message pour pouvoir cocher un checkbox dans un tableau lors de l'appuie sur une ligne http://www.developpez.net/forums/d15...gne-d-tableau/, ce problème a été résolu mais je souhaiterai maintenant enlever les checkboxs de mon tableau pour un résultat plus esthétique tout en ayant la même fonctionnalité.

Voila donc mon problème :

Plusieurs lignes de mon tableau appartiennent à la même classe, je voudrais que lorsque l'on clique sur une ligne, la classe "selected" soit ajoutée à toutes les lignes ayant la même classe que la ligne cliquée.
Je vous montre l'exemple qui marche avec les checkboxs : http://jsfiddle.net/Flavors/nuzo8gn2/6/ (je voudrais remplacer l'état "checked" des checkboxs par une classe "selected" pour ne pas avoir les checkboxs)

Le code :

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
 
$('tbody').on( 'click', 'tr', function () //Lors d'un clic sur une ligne du tableau mais pas sur l'en-tête
{
	$classe = $(this).attr('class')//On recupére le nom de la classe de la ligne sur laquelle on a cliqué (plusieur lignes peuvent avoir la même classe elles sont rangées dans l'ordre croissant des "ligne_tableau_x") la classe des lignes a été mise en place pour la selection avec rowspan
 
	$classe= "." + $classe;//On concaténe le nom de la classe récupéré pour le formaté "ligne_tableau_x" -> ".ligne_tableau_x"
	alert($classe);
	if($(this).hasClass("selected"))
	{
		alert("selected");	
		$($classe).toggleClass("selected");
		$($classe).css("background-color","transparent");//On change la couleur de la ligne (toute la hauteur du rowspan)
	}
	else//Si la case n'est pas cochée
	{
		alert("not selected");
		$($classe).toggleClass("selected");
		$($classe).css("background-color","#e9f8ff");//On change la couleur de la ligne (toute la hauteur du rowspan)
	}
alert($classe);
});

Quand je clique sur une ligne qui n'a pas "selected", elle se selectionne bien mais quand je clique sur une ligne qui a déjà "selected", elle ne se deselectionne pas... Pourtant j'ai bien vérifier je rentre bien dans la condition
EXEMPLE : http://jsfiddle.net/Flavors/nuzo8gn2/8/
Je ne comprend pas pour moi ce code est valable? Je test si la ligne possède la classe "selected". et pour chaque élément ayant la même classe que la ligne, j'ajoute la classe "selected" ou je l’enlève selon la condition.
Mais ça ne fonctionne pas pour deselectionner...
Si quelqu'un a une idée sur le problème je suis preneurs!

Merci.

[SpaceFrog]

addClass() et removeClass() feront ton bonheur je pense

[flavors]

Bonjour et merci pour votre réponse.
Justement dans un 1er temps j'ai utilisé addClass et removeClass mais j'obtenais le même probléme, la classe qui s'ajoute mais qui ne s’enlève pas...
On m'a ensuite renseigné sur l'utilisation de toggleClass et c'est vrai que c'est plus pratique niveau gain en ligne de code. J'en suis la actuellement :

Code :

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

1
2
3
4
5
6
7
8
9
 
 
$('tbody').on( 'click', 'tr', function () //Lors d'un clic sur une ligne du tableau mais pas sur l'en-tête
{
	$classe = $(this).attr('class')//On recupére le nom de la classe de la ligne sur laquelle on a cliqué (plusieur lignes peuvent avoir la même classe elles sont rangées dans l'ordre croissant des "ligne_tableau_x") la classe des lignes a été mise en place pour la selection avec rowspan			
	$classe= "." + $classe;//On concaténe le nom de la classe récupéré pour le formaté "ligne_tableau_x" -> ".ligne_tableau_x"
	alert($classe);
	$($classe).toggleClass("selected");	
});

Mais avec toujours le même problème : Lors du 1er clique ça fonctionne (les lignes prennent bien "selected" en classe supplémentaire) mais des que je reclique au lieu d'enlever la classe "selected", il ne se passe rien...

[BakSh0]

Bonjour,

Tu peux tester si il à déjà la classe selected, grâce à hasClass si oui tu le removeClass, sinon tu addClass

Code :

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

1
2
3
4
5
6
7
$('tbody').on( 'click', 'tr', function () {	
        if ($(this).hasClass("selected")) {
	  $(this).removeClass("selected");	
        } else {
	  $(this).addClass("selected");	
       }
});

[flavors]

Merci pour votre réponse.
En effet j'avais mal compris les paramétres de .toggleClass().
J'avais dans un 1er temps essayé en testant avec .has("selected") et .addClass / removeClass mais sans succés.
Quelqu'un m'a donné la solution que je poste si ça peut aider quelqu'un.
Je ne passe plus par des classe au niveau de la ligne mais par des data-tr :

Code :

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

1
2
3
4
5
6
7
 
$('tbody').on( 'click', 'tr', function () //Lors d'un clic sur une ligne du tableau mais pas sur l'en-tête
{
	$dataTr = $(this).data('tr');
	$trList = $("tr[data-tr=" + $dataTr + "]"); //On liste tous les TR qui on le même attribut
	$trList.toggleClass("selected");
});

donc on n'a plus

Code :

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

1
2
3
4
 
<tr class = blabla> </tr>
//mais
<tr data-tr="ligne_x"</tr>

Merci.

[BakSh0]

En fait que tu utilise un data-tr comme sélecteur ou des class je ne vois pas bien ou est la différence ?

[flavors]

Bonjour désolé de ne pas avoir répondu a votre question je ne l'avais pas vu.
Si j'ai utilisé data-tr c'est parceque quelqu'un m'a recommandé cette solution et qu'elle fonctionné.
Pour un souci de lisibilité je préférerai effectivement utiliser les classes. mais à ce jour, je n'y arrive toujours pas.

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
 
//Fonction JS pour selectionner les lignes
$('tbody').on( 'click', 'tr', function () //Lors d'un clic sur une ligne du tableau mais pas sur l'en-tête
{
	$classe = $(this).attr('class')
	//$classe= "." + $classe;
	alert($classe);
	if ($(this).hasClass("selected")) 
	{
		$('tr[class="'+$classe+'"').removeClass("selected");	
	} 
	else 
	{
		$('tr[class="'+$classe+'"').addClass("selected");	
	}
});

Je voudrais arriver à quelque chose comme ça : https://jsfiddle.net/Flavors/n03uk6vs/
en utilisant addClasse et removeClass. Mais ça ne marche pas ...