Discussion :

[flavors]

Bonjour.
Désolé pour le double poste. je voulais supprimer l'autre (http://www.developpez.net/forums/d15...ression-array/ ) mais je ne trouve pas comment faire...

Je rencontre un probléme pour gérer les données d'un array.
Je m'explique : j'ai un tableau http://img11.hostingpics.net/pics/534052tableauhtml.png

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 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/

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
 
//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

[Darkaurora]

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...

Pas compris !?! Ton jsFiddle me semble ok tu sélectionnes ça ajoute dans le tableau tu désélectionnes ça retire du tableau, je ne vois pas ou est le problème ?

[flavors]

Merci de votre réponse:

En effet, je me suis mal exprimé. En fait quand je déselectionne une ligne, je veux que seule cette valeur soit supprimé de l'array et non pas que l'array se vide entièrement.
Comme plus tard comme mon tableau sera sur plusieurs pages, je souhaite transmettre l'array de page en page. De la sorte si j'arrive sur une page ou j'avais déjà selectionné des lignes du tableau, elles se reselectionnent automatiquement et si je les deselectionnes, elles sont supprimé de l'array mais pas celles qui restent selectionnées.
Dans un 1er temps je pensais faire cela

Code :

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

1
2
3
4
5
6
7
 
if($(this).hasClass('selected'))
{
	Suppr_Liste(); //je purge la liste
	$trList.removeClass('selected');//On enleve la classe "selected" à la ligne sélectionnée
        Ajout_Liste() //reremplir la liste avec les éléments sélectionnés
}

Mais si je fais ça je perds les éléments sélectionnés des autres pages...
Je viens de me rendre compte que je me suis un peu laissé emporté dans mon explication...><
Si ce n'est pas clair n'hésitez pas à me le faire savoir.

[Darkaurora]

Le problème de ton code est que tu parcours tes lignes de tableau sans jamais passer une référence de suppression ce qui entraîne la suppression de tout ton tableau. Si tu ne souhaites supprimer que la valeur de la ligne désélectionnée alors fait comme ceci:

Code :

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

1
2
3
4
5
6
7
8
9
Suppr_Liste($(this)); // on passe l'objet jquery correspondant à la ligne désélectionnée l.13
// on modifie la fonction Suppr_liste comme suit:
function Suppr_Liste($tr)
{	//alert("Entrée dans suppression");
    var search = $tr.find('.col_marque').text(),
        position = liste_marque.indexOf(search);
    liste_marque.splice(position,1);//On enleve l'element de la liste
    console.log(liste_marque);
}

je retourne le jsfiddle modifié, j'utilise la console pour débugguer (f12) https://jsfiddle.net/nuzo8gn2/22/

[flavors]

Merci beaucoup!

Effectivement, comme je passe par tous les "selected", je les supprime tous. Je voulais au début ne récupérer que l’élément cliqué en passant $(this) en argument de la fonction mais je n'avais pas réussi (peut-être une erreur de syntaxe) et je n'avais pas trouvé d'info pour voir si c'est possible. Au moins maintenant je le sais et ça va surement me resservir.
C'est vrai que l'affichage dans la console est plus pratique que les alerts qui pop><

En tout cas, ça marche nikel, je vais essayer de le mettre en place pour l'ajout au moins ça évitera de passer inutilement sur tous les selected avant de l'ajouter à la liste.

Encore merci!

[Darkaurora]

Si c'est résolu n'oublie pas de marquer le sujet comme résolu

[flavors]

Bonjour,
Je me suis repenché sur le code que tu m'as donné et finalement, il y a quelque chose que je ne comprends pas...

Code :

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

1
2
3
4
5
6
7
 
function Suppr_Liste($tr) //$tr est la ligne sur laquelle on a cliqué
{	
	var search = $tr.find('.col_marque').text(); //dans la ligne "$tr" on chercher la cellule qui "col_marque" et on récupére sa valeur. C'est la que je bloque.
	position = liste_marque.indexOf(search);
	liste_marque.splice(position,1);//On enleve l'element de la liste 
}

Quand je clique sur la 1ere ligne (le rowspan fait bien parti de la 1ere ligne) c'est normal qu'il l'enleve la valeur de la liste puisqu'il y a bien un "col_marque" sur la 1ere ligne mais lorsque que je clique sur les autres lignes à droite du rowspan comment cela peut-il marché puisqu'il n'y a pas de "col_marque" sur cette ligne?

[Darkaurora]

Très bonne question et si je devais répondre honnêtement je dirais que je n'en sais rien du tout. Cependant si on réfléchit un minimum on peut se dire que les lignes du tableau qui complètent le rowspan de la ligne parente sont liées d'une manière ou d'une autre. De ce fait le sélecteur fonctionne néanmoins il est tout à fait probable que sur le fiddleJS il s'agisse d'un coup de bol et que ça ne fonctionnera que la moitié du temps.

Je vais essayer de me rencarder sur la question car elle est vraiment intéressante et mérite que d'autre personnes s'y intéresse.

[flavors]

J'ai essayé en dehors de JSFiddle ça marche aussi.
En fait je m'en suis rendu compte quand j'ai essayé de faire la même chose avec l'ajout pour lequel ça ne fonctionne pas.
https://jsfiddle.net/Flavors/nuzo8gn2/25/
Pourtant c'est exactement la même chose.
Quand on clique sur la 1ere ligne pas de problème, il l'ajoute bien et quand on clique sur les autres, il ajoute "undefined".

EDIT : En fait même pour l'enlever ça ne marche pas.Quand on deselectionne une ligne (grosse ligne) en cliquant sur la 1ere, le bon champ est retiré de la liste, mais quand on clique sur les autres, c'est le dernier élément de la liste qui est enlevé.

[flavors]

Bon du coup j'ai juste modifié en passant la classe commune aux ligne en argument de la fonction pour faire une recherche dessus. Pour cela ça marche, mais quand je fais la même chose pour l'ajout ça ne marche pas et je ne comprends pas pourquoi><
https://jsfiddle.net/Flavors/nuzo8gn2/30/ (le JSFiddle fonctionne car c'est l'ancienne fonction d'ajout qui tourne, celle qui ne marche pas est en commentaire)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function Suppr_Liste($classe)
{	
    var search = $('tr[class="'+$classe+'"]').find('.col_marque').text();
    position = liste_marque.indexOf(search);
    liste_marque.splice(position,1);//On enleve l'element de la liste 
}
function Ajout_Liste($classe)
{	
    var search = $('tr[class="'+$classe+'"]').find('.col_marque').text();
    liste_marque.push(search);//On ajoute "id" à la liste
}

Si jamais vous avez une idée du pourquoi...
Merci

[flavors]

Désolé de reposter après un de mes messages, c'est pour faire un petit up.

Quelqu'un aurait-il une idée de pourquoi, lors dans ma fonction Suppr_Liste, la valeur est de la cellule est bien supprimée de ma liste mais la fonction Ajout_Liste j'ai bien une place qui est prise dans ma liste mais il n'y a rien ... https://jsfiddle.net/Flavors/nuzo8gn2/36/
On peut le voir en selectionnant plusieurs ligne à la suite, des "," s'affiche mais avec rien entre.

Merci.

[flavors]

Bon j'ai résolue mon problème au lieu de récupérer la cellule dans chaque fonction je le fais plus haut et je passer l'id en paramètre des fonctions.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$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;
var id = $('tr[class="'+$classe+'"]').find('.col_marque').text(); //On recupere la 1ere cellule de la 1ere ligne
function Ajout_Liste(id)
{	
	liste_marque.push(id);//On ajoute "id" à la liste
}
 
function Suppr_Liste(id)
{	
	position = liste_marque.indexOf(id);
	liste_marque.splice(position,1);//On enleve l'element de la liste 
}

Mais je ne comprends toujours pas pourquoi l'ajout ne fonctionnait pas en passant par les classes...