Ajouter une 2eme classe aux éléments d'une autre classe
Bonjour.
Hier j'avais posté un message pour pouvoir cocher un checkbox dans un tableau lors de l'appuie sur une ligne ([http://www.grafikart.fr/forum/topics/18021]()), 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 :
$('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
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.
11 réponses
Salut salut me revoilà,
J'ai changé deux trois trucs dans ton code qui était un peu farfelues, je te laisse voir ici ce que j'ai fait et j'espère que tu comprendra : http://jsfiddle.net/nuzo8gn2/9/
Hésite pas si tu as des questions !
L'attribute data-tr sur les TR est un attribut HTML5. J'aurais pu mettre data-numero-de-la-ligne, ca aurait fonctionné aussi (en changeant dans le JS aussi)
Tu faisait une vérification sur la classe du TR pour savoir si c'était le header ou pas. Seulement, imagine que demain une classe se rajoute à ton thead > tr, ta vérification ne fonctionnera plus. C'est donc pour cela que j'ai utilisé la méthode "hasClass" de jQuery.
1) la on récupére la valeur que l'on a mis dans data-tr du tr sur lequel on clique ?
Oui c'est ça, tu aurais mis :
$tr = $(this);
$dataTr = $tr.data('grafikart_c_tro_kool');<TR data-tr="grafikart_c_tro_kool">Tu récuperais tous les TR avec cet attribut.
2) je ne comprend pas cette ligne la. $trList fait + ou - office de classe? J'entend par la que quand on appelle $trList on appelle tous les tr qui on data-tr="ligne_4" (si on reprend les données du dessus) ?
Imagine le "+" comme une concaténation, et non une opération, ce qui donne par exemple :
$trList = $("tr[data-tr=grafikart_c_tro_kool]");Et oui on appel tous les TR qui on un data-tr == 'grafikart_c_tro_kool' !
Bon comme c'est un toggle, j'ai enlevé les if mais je vois toujours pas d'ou viens mon probléme...
Pourquoi le 1er clique j'ai bien la classe "selected" qui s'ajoute mais je ne peux pas le deselectionner ...
$('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");
});Nos messages se sont croisés x)
Et pour ta question, hésite pas a faire des console.log() dans tout les sens.
En faisant ça tu aurais vu que $classe la première fois était égale à ".trucmuch", mais la seconde fois ".trucmuch selected" !
Merci, je vais me pencher sur votre code.
Je ne connaissais pas console.log() c'est pour ça que je fais beaucoup d'alert.
Pour ce qui est de la classe qui est une 1ere fois égale à "".trucmuch", mais la seconde fois ".trucmuch selected" !". Je pensais que c'est ce qu'il fallait comme j'ai mis "selected en paramétre du toggle si l'élément qui prend la fonction (ici : $($classe).toggleClass("selected");)
posséde déjà "selected", "selected" est enlevé, sinon, il est ajouté? Du moins c'est ce que j'ai compris en lisant la doc :
http://api.jquery.com/toggleclass/
The first time we apply $( "div.tumble" ).toggleClass( "bounce" ), we get the following:
<div class="tumble bounce">Some text.</div>The second time we apply $( "div.tumble" ).toggleClass( "bounce" ), the <div> class is returned to the single tumble value:around
<div class="tumble">Some text.</div>
Alert($classe) ou console.log($classe) et regarde à quoi ressemble le contenu ;) (pense bien aux méthodes hasClass qui est très utile dans ton cas)
Ah ok j'avais mal compris. En effet il faudrait simplement avoir : $($classe).toggleClass("selected"); (avec $classe = .trucmuche et nom pas .trucmuche selected). Dommage ça aurait été beaucoup plus simple.
Je crois que j'ai compris votre code :
$dataTr = $tr.data('tr');la on récupére la valeur que l'on a mis dans data-tr du tr sur lequel on clique ?
par exemple :
<TR data-tr="ligne_4">on récupére "ligne 4 "?
$trList = $("tr[data-tr=" + $dataTr + "]");je ne comprend pas cette ligne la. $trList fait + ou - office de classe? J'entend par la que quand on appelle $trList on appelle tous les tr qui on data-tr="ligne_4" (si on reprend les données du dessus)?
Ah merci beaucoup!
C'est tout clair à présent.
Juste une autre petite question (désolé) :
$tr = $(this);
$dataTr = $tr.data('grafikart_c_tro_kool');
//pourquoi pas
$dataTr = $(this).data('grafikart_c_tro_kool');C'est juste pour un soucis de lisibilité? ou il y a d'autres raisons?