Bonjour.
Je rencontre un probléme pour gérer les données d'un array.
Je m'explique : j'ai un tableau

et je voudrais que lorsque je clic sur une ligne du tableau, la valeur de la 1ere cellule de la ligne soit ajoutée ou enlevée d'un array selon si la ligne est sélectionnée ou deselectionnée.
L'ajout dans l'array fonctionne http://www.grafikart.fr/forum/topics/18078 (merci betaWeb) mais je souhaite aussi implémenter la suppression dans l'array car le tableau est sur plusieurs pages (et je souhaite pouvoir revenir sur la page précédente pour deselectionner des cellules)

https://jsfiddle.net/Flavors/nuzo8gn2/21/

//Fonction JS pour selectionner les lignes
    var $marques = $('.marques');//déclaration en variable globale
    var liste_marque = [];//déclaration en variable globale
    $('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');//le data-tr des ligne vaut "ligne_x"
        $trList = $("tr[data-tr=" + $dataTr + "]"); //On liste tous les TR qui on le même attribut ("ligne_tr")

        if($(this).hasClass('selected'))//Si la ligne cliqué à la classe "selected"
        {
            Suppr_Liste(); //fonction de suppression dans la liste
            $trList.removeClass('selected'); //On enleve la classe "selected"
        }
        else
        {
            $trList.addClass('selected'); //On ajoute la classe "selected"
            Ajout_Liste()//fonction d'ajout dans la liste
        }
        liste_marque.length ? $marques.text(liste_marque.join(', ')) : $marques.text(''); //On affiche la liste
    });

    //Fonction JS pour Mettre à jour la liste des elements selectionnes
    function Ajout_Liste()
    {   
        $('.selected').each(function() //Pour chaque element ayant la classe "selected"
        {
            var id = $('.col_marque', this).html(); //on recupere la valeur de la 1ere cellule
            var position = liste_marque.indexOf(id) //On prend sa position dans la liste
            if(('undefined' != typeof(id)) && (position == -1)) //Si id existe et n'est pas présent dans la liste_marque
            {
                alert("Il n'existe pas dans la liste, on l'elenve");
                liste_marque.push(id); // On l'ajoute à la liste
            }
        });   
    }

    function Suppr_Liste()
    {   
        $('.selected').each(function()//Pour chaque element ayant la classe "selected"
        {
            var id = $('.col_marque', this).html();//on recupere la valeur de la 1ere cellule
            var position = liste_marque.indexOf(id)//On prend sa position dans la liste
            if(position != -1)//Si il est déjà dans la liste
            {
                alert("Il existe dans la liste, on l'elenve");
                liste_marque.splice(position,1); //On enleve l'element de la liste
            }
        }); 
    }

Le probleme c'est que lors de la suppression je boucle sur tous les "selected" mais je n'arrive pas à voir comment n'en selectionner qu'un seul...

Si quelqu'un à une piste, ce serait gentil.

Merci

2 réponses


betaWeb
Réponse acceptée

Salut,

Lorsque tu construits ton table html, ajoute un attribut "data-index" aux <tr>, de façon à ensuite pouvoir l'extraire lorsque la ligne est selected. De cette façon, tu aura l'index de l'élément dans ton array.
C'est une solution comme une autre. Sinon il faut récupérer la clé en fonction de la valeur selected avec la fonction array.indexOf(valeur).

Rovalf
Auteur
Réponse acceptée

Merci pour votre réponse.
Oui je comprends c'est vrai que c'est pratique, une fois qu'on a récupérer la valeur de l'index et faire mon traitement par rapport à ce dernier.

Je suis désolé, j'avais oublié d'éditer le post. A présent je passe par une pagination en PHP selon le tutoriel de ce site et pour garder ma selection d'une page à l'autre, je passe par de l'ajax pour ajouter ou enlever la selection d'un tableau de Session.
Je ne sais pas si c'est correct de faire comme cela, mais c'est trés pratique en tout cas.><

Merci encore pour votre réponse.