Discussion :

[Air P-E]

Bonjour ,

Je me heurte à un nouveau problème que voici :

Je suis en train de créer une page où je gère l'ajout et la suppression de ligne dans un tableau (physique) via DOM.
J'ai une partie du tableau qui est statique et une autre partie du tableau où je peux ajouter des lignes et les supprimer. Ca j'arrive à le faire il n'y a pas de soucis.

Pour ma partie dynamique, j'associe les valeurs de mes champs à un tableau "associatif".

J'essaie de supprimer une ligne de ce tableau mais sans succès...

Voici mon 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
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
function addParam() {
	if (tableParam == null)
		tableParam = new Array();
 
	var indice = tableParam.length;
	alert('indice : '+indice);
	tableParam[indice] = new Array();
	tableParam[indice]["name"] = "name"+indice;
	tableParam[indice]["env"] = "env"+indice;
	tableParam[indice]["serv"]= "serv"+indice;
	tableParam[indice]["meth"]= "meth"+indice;
	tableParam[indice]["input"]= "input"+indice;
	tableParam[indice]["exp"]= "exp"+indice;
	tableParam[indice]["timeout"]= "timeout"+indice;
 
	var text = "";
	for (var i=0;i<tableParam.length;i++) {
		text += "tableParam "+i+"\n\n";
 
		for (var propriete in tableParam[i])
			text += propriete + " : "+tableParam[i][propriete]+"\n";
 
		alert(text);
		text = "";
	}
}
 
function removeAdd(bouton) {
	var node = bouton.parentNode.parentNode;
	var parent = node.parentNode;
	parent.removeChild(node);
 
	alert('node : '+node.id+', taille tableParam : '+tableParam.length);
 
	//Méthode 1
	//delete tableParam[node.id];
 
	//Méthode 2
	//tableParam.splice(node.id, node.id);
 
	//Méthode 3
	/*
	for (i = node.id; i < tableParam.length; i++) {
		alert('tableParam[i] : '+tableParam[i]+', tableParam[i+1] : +tableParam[i+1]);
		tableParam[i] = tableParam[i+1];
	}
	tableParam.pop();
	*/
 
	var text = "";
	for (var i=0;i<tableParam.length;i++) {
		text += "tableParam "+i+"\n\n";
 
		for (var propriete in tableParam[i])
			text += propriete + " : "+tableParam[i][propriete]+"\n";
 
		alert(text);
		text = "";
	}
}

La méthode 1 est celle qui fonctionne le mieux je dirai... Elle ne me supprime pas réellement la ligne mais me vide le contenu du "sous-tableau", par contre quand je supprime une ligne, que j'en ajoute une etc. les indices sont décalés et mes suppressions ne fonctionnent plus...

La méthode 2 qui m'avait l'air pas mal, car d'après ce que j'ai vu sur le net, pas besoin de redécaler à chaque fois, mais ça ne fonctionne pas vraiment...

La méthode 3 ne connaît pas une grande réussite non plus...

comment dois-je m'y prendre ?

[Nicopilami]

Coucou, je pense que la fonction que tu recherches est la fonction "delete"

bye
Nico

[Bovino]

Déjà, tu parles de tableau associatif (donc en fait d'objet), mais il s'agit d'un tableau normal (type Array)

Donc la méthode de suppression est bien splice(), reste que

ça ne fonctionne pas vraiment...

est à peu près aussi explicite et informatif qu'un message d'erreur de IE, donc difficile d'en dire plus...

[Nicopilami]

Déjà, tu parles de tableau associatif (donc en fait d'objet), mais il s'agit d'un tableau normal (type Array)

mea culpa, je n'avais pas lu tout le message,
mon esprit a joué à Pavlov : "supprimer ligne" + "tableau associatif" => "delete"

promis la prochaine fois, je lirai le message en entier...

bye
Nico

[Air P-E]

Merci de ta réponse Nicopilami

Mais l'opération delete correspond à ma méthode 1... (En commentaire dans mon premier post)

La méthode 1 est celle qui fonctionne le mieux je dirai... Elle ne me supprime pas réellement la ligne mais me vide le contenu du "sous-tableau", par contre quand je supprime une ligne, que j'en ajoute une etc. les indices sont décalés et mes suppressions ne fonctionnent plus...

[Nicopilami]

Merci de ta réponse Nicopilami

Mais l'opération delete correspond à ma méthode 1... (En commentaire dans mon premier post)

ok, et par rapport à ta méthode 2, du coup, tu peux essayer ca (source ici) ?

Code :

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

1
2
3
4
Array.prototype.remove=function(s){
var index = this.indexOf(s);
if(this.indexOf(s) != -1)this.splice(i, 1);
}

et donc là où tu veux l'utiliser :

Code :

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

tableParam.remove(node.id);

bye
nico

[Air P-E]

ok, et par rapport à ta méthode 2, du coup, tu peux essayer ca (source ici) ?

Code :

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

1
2
3
4
Array.prototype.remove=function(s){
var index = this.indexOf(s);
if(this.indexOf(s) != -1)this.splice(i, 1);
}

et donc là où tu veux l'utiliser :

Code :

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

tableParam.remove(node.id);

bye
nico

Je ne suis pas sûr de savoir comment mettre ça en oeuvre...

en testant

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
//Méthode 4
Array.prototype.remove=function(s) {
	var index = this.indexOf(s);
	if(this.indexOf(s) != -1)this.splice(i, 1);
};
tableParam.remove(node.id);
 
//indice = tableParam.length;
 
var text = "";
for (var i=0;i<tableParam.length;i++) {
	//text += "tableParam "+i+"\n\n";
 
	for (var propriete in tableParam[i])
		text += propriete + " : "+tableParam[i][propriete]+"\n";
 
	alert(text);
	text = "";
}

Il me prend la fonction remove comme une propriété de tableParam quand j'affiche mon alert...

[Nicopilami]

Il me prend la fonction remove comme une propriété de tableParam quand j'affiche mon alert...

oui, car l'ajout d'une méthode au prototype de l'objet (c'est comme cela qu'on dit ?) rajoute la fonction à tous les objets de type Array; tu la vois donc dans la liste des propriétés de l'objet.

par contre, tu peux normalement faire

Code :

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

montableau.remove(positionDeLitemAenlever)

bye
Nico

[Bovino]

@ Nicopilami : ça ne change pas grand chose, delete est censé fonctionner aussi sur les arrays (ceci dit, j'avais cru lire quelque part que cet opérateur était déprécié...)

@Air P-E : c'est pas l'idéal de récupérer l'id d'un élément après l'avoir supprimé

[Air P-E]

euh... Hem je reçois vos messages pas trop dans l'ordre !
En actualisant la page Bovino, j'ai reçu ton premier message après... Bref !

Donc,
@Nicopilami :
En regardant ton code avec le splice, je me suis rendu compte que j'avais fait une erreur déjà dans mon code, j'avais mis :

Code :

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

1
2
//Méthode 2
//tableParam.splice(node.id, node.id);

au lieu de :

Code :

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

tableParam.splice(node.id, 1);

...

J'ai un peu les boules d'avoir fait cette erreur mais bon...
Ca ne fonctionne toujours pas. Mais en changeant le code du coup, j'ai retesté, et Bovino je peux enfin te répondre plus précisément et ne pas ressembler à une erreur ie comme tu dis (désolé...)

Donc avec le splice, quand je supprime une ligne ça fonctionne, et cela tant que je supprime une ligne avec un id < à un id que j'ai déjà supprimé, si je supprime une ligne au dessus, ça ne supprime plus ou alors je ne sais trop quelle ligne !

exemple (parce que je sens que je n'ai pas été trop clair là...) :

0 ligne1
1 ligne2
2 ligne3
3 ligne4

Si je supprime la "ligne 3" avec son id 2, je peux supprimer la "ligne 1" et la "ligne 2" mais pas la "ligne 4". Si ensuite je supprime la "ligne 2", je ne peux que supprimer la "ligne 1"...

C'est plus clair ? :s

Cette erreur doit probablement venir de mon code mais je ne sais trop où...

@Bovino
Qu'entends-tu par

@Air P-E : c'est pas l'idéal de récupérer l'id d'un élément après l'avoir supprimé

C'est surtout le mot "récupérer" qui me gêne... Parce que quand je supprime une ligne avec le splice, les index sont dacalés automatiquement et je ne récupère rien... Enfin je ne suis pas sûr de comprendre !

[Bovino]

C'est plus clair ? :s

Oui, beaucoup plus
Donc l'erreur vient du fait que tu supprimes un élément de ton tableau en fonction de l'id d'un élément HTML, or quand tu supprimes l'élément du tableau, ce dernier est réindexé, mais pas tes id, du coup, lorsque tu veux supprimer un indice supérieur, l'id et l'indice ne correspondent plus

Qu'entends-tu par

C'est surtout le mot "récupérer" qui me gêne... Parce que quand je supprime une ligne avec le splice, les index sont dacalés automatiquement et je ne récupère rien... Enfin je ne suis pas sûr de comprendre !

C'est juste que dans ta logique, tu récupères un élément HTML (node), puis tu le supprimes du DOM et ensuite tu récupères son id. La logique voudrait que tu récupères l'id avant la suppression.