IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

supprimer un élément dans un tableau "associatif"


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Inscrit en
    Avril 2010
    Messages
    200
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 200
    Par défaut supprimer un élément dans un tableau "associatif"
    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 ?

  2. #2
    Membre éclairé Avatar de Nicopilami
    Profil pro
    Ingénieur sécurité
    Inscrit en
    Janvier 2009
    Messages
    354
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur sécurité

    Informations forums :
    Inscription : Janvier 2009
    Messages : 354
    Par défaut
    Coucou, je pense que la fonction que tu recherches est la fonction "delete"

    bye
    Nico

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    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...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Membre éclairé Avatar de Nicopilami
    Profil pro
    Ingénieur sécurité
    Inscrit en
    Janvier 2009
    Messages
    354
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur sécurité

    Informations forums :
    Inscription : Janvier 2009
    Messages : 354
    Par défaut
    Citation Envoyé par Bovino Voir le message
    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

  5. #5
    Membre confirmé
    Inscrit en
    Avril 2010
    Messages
    200
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 200
    Par défaut
    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...

  6. #6
    Membre éclairé Avatar de Nicopilami
    Profil pro
    Ingénieur sécurité
    Inscrit en
    Janvier 2009
    Messages
    354
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur sécurité

    Informations forums :
    Inscription : Janvier 2009
    Messages : 354
    Par défaut
    Citation Envoyé par Air P-E Voir le message
    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

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    @ 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é
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  8. #8
    Membre confirmé
    Inscrit en
    Avril 2010
    Messages
    200
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 200
    Par défaut
    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 !

  9. #9
    Membre confirmé
    Inscrit en
    Avril 2010
    Messages
    200
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 200
    Par défaut
    Citation Envoyé par Nicopilami Voir le message
    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...

  10. #10
    Membre éclairé Avatar de Nicopilami
    Profil pro
    Ingénieur sécurité
    Inscrit en
    Janvier 2009
    Messages
    354
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur sécurité

    Informations forums :
    Inscription : Janvier 2009
    Messages : 354
    Par défaut
    Citation Envoyé par Air P-E Voir le message
    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

  11. #11
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par Air P-E
    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
    Citation Envoyé par Air P-E
    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.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  12. #12
    Membre confirmé
    Inscrit en
    Avril 2010
    Messages
    200
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 200
    Par défaut
    Je suis pas sûr qu'on se soit compris... C'est peut-être moi qui ne comprend rien mais j'ai bien saisi que la fonction était rajouté à la classe Array donc on peut accéder à la fonction remove depuis n'importe quel objet Array.

    Moi ce que je voulais dire c'est qu'il s'affiche dans ma boucle
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    for (var propriete in tableParam[i])
    	text += propriete + " : "+tableParam[i][propriete]+"\n";
    Alors qu'il n'est censé montrer que
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    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;
    On se comprend mieux maintenant ?

    Sinon je n'ai toujours pas réussi à régler le problème !

    Mais merci de ton implication en tout cas !

  13. #13
    Membre éclairé Avatar de Nicopilami
    Profil pro
    Ingénieur sécurité
    Inscrit en
    Janvier 2009
    Messages
    354
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur sécurité

    Informations forums :
    Inscription : Janvier 2009
    Messages : 354
    Par défaut
    ah ok...mais c'est normal, car tu as déclaré ton élément comme Array :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    tableParam[indice] = new Array();
    ?

    mets plutot
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    tableParam[indice] = new Object();
    je ne sais pas si ca marchera mieux, mais ca sera plus joli


    bye
    Nico

  14. #14
    Membre confirmé
    Inscrit en
    Avril 2010
    Messages
    200
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 200
    Par défaut
    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.
    D'accord je pense avoir compris ce que tu veux dire. J'ai donc fait
    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
    function removeAdd(bouton) {
    	var node = bouton.parentNode.parentNode;
    	var parent = node.parentNode;
     
    	nbAddParam--;
    	//alert('node : '+node.id+', taille tableParam : '+tableParam.length);
     
    	// Méthode 1
    	//delete tableParam[node.id];
     
    	//Méthode 2
    	tableParam.splice(node.id, 1);
     
    	//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();
    	*/
     
    	//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 = "";
    	}
     
    	parent.removeChild(node);
    }
    En gros j'ai mis la ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    parent.removeChild(node);
    après avoir récupéré son id, gérer tableParam et tout... C'est ce que tu voulais dire non ?
    En tout cas le soucis reste le même.

    Tant que j'y suis merci à toi aussi pour ton aide !

  15. #15
    Membre confirmé
    Inscrit en
    Avril 2010
    Messages
    200
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 200
    Par défaut
    @Nicopilami

    Bon... Soit je suis vraiment pas doué soit... Ben nan en fait je vois pas d'autres solutions !
    Mais ça ne supprime aucune ligne !

    Je ne dois pas bien m'y prendre ! J'ai testé en mettant le prototype dans la fonction, hors la fonction...
    Si je m'y prends mal (ce qui est sûrement le cas) désolé ! Je ne fais du javascript que depuis 2 semaines... Ce n'est vraiment pas mon domaine !

  16. #16
    Invité
    Invité(e)
    Par défaut
    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"...
    Si tu supprime la "ligne 3" le tableau devient

    0 ligne1
    1 ligne2
    2 ligne4

    donc si tu cherche a supprimer la ligne 4 tu ne peut pas vue quel n'existe plus tu doit supprimer la ligne 3 ?

  17. #17
    Membre éclairé Avatar de Nicopilami
    Profil pro
    Ingénieur sécurité
    Inscrit en
    Janvier 2009
    Messages
    354
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur sécurité

    Informations forums :
    Inscription : Janvier 2009
    Messages : 354
    Par défaut
    Reprenons au début, j'ai refait un exemple de code qui fonctionne pour comprendre bien ton problème

    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
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    <html><head><script>
     
    // déclaration du tableau de facon globale
    var tableParam;
     
    //on cree le tableau avec 5 lignes
    function addParam() {
     
    	//en javascript null -> undefined
    	//if (tableParam == null)
    	if (tableParam == undefined)
    		tableParam = new Array();
     
    	var indice = tableParam.length;
    	//alert('indice : '+indice);
    	for(indice=0;indice<5;indice++)
    	{
    		// j'ai laissé Array pour rester dans le code original, 
    		// mais je l'aurais bien remplacé par Object
    		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;
    	}	 
     
    }
     
    //une fonction qui ne fait qu'afficher le tableau 
    function displayTable()
    {
    	var text=''
    	for (var i=0;i<tableParam.length;i++) 
    	{
    		text += "<HR/>tableParam "+i+"\n\n";
     
    		for (var propriete in tableParam[i])
    			text += "<LI>"+propriete + " : "+tableParam[i][propriete]+"</LI>";
     
    	}
    		document.all.tstDebug.innerHTML+=text;
     
    }
     
    //la fameuse fonction qui supprime l'item avec SPLICE
    function removeItem(idToRemove)
    {
    	tableParam.splice(idToRemove, 1);
    }
     
     
    //la fonction qui va s'executer au débarrage de la page
    window.onload=function(){
     
    	//on vide la page
    	document.all.tstDebug.innerHTML=''
    	var text=''
     
    	//on cree le tableau javascript
    	addParam()
     
    	//on affiche le tableau
    	displayTable()
    	document.all.tstDebug.innerHTML+='<HR/><HR/>'
     
    	//on supprime le 2e item
    	removeItem(2)
     
    	//on affiche le tableau
    	displayTable()
    	document.all.tstDebug.innerHTML+='<HR/><HR/>'
     
    	//on supprime le nouveau 2e item
    	removeItem(2)
     
    	//on affiche le tableau
    	displayTable()
     
    	}
    </script>
    </head>
    <body>
    <!-- le span dans lequel on affiche les infos de debug -->
    <span id="tstDebug"></span>
    </body>
    </html>
    ce qui donne à l'execution

    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
     
    # tableParam 0 name : name0
    # env : env0
    # serv : serv0
    # meth : meth0
    # input : input0
    # exp : exp0
    # timeout : timeout0
     
    # tableParam 1 name : name1
    # env : env1
    # serv : serv1
    # meth : meth1
    # input : input1
    # exp : exp1
    # timeout : timeout1
     
    # tableParam 2 name : name2
    # env : env2
    # serv : serv2
    # meth : meth2
    # input : input2
    # exp : exp2
    # timeout : timeout2
     
    # tableParam 3 name : name3
    # env : env3
    # serv : serv3
    # meth : meth3
    # input : input3
    # exp : exp3
    # timeout : timeout3
     
    # tableParam 4 name : name4
    # env : env4
    # serv : serv4
    # meth : meth4
    # input : input4
    # exp : exp4
    # timeout : timeout4
    puis au second appel de removeItem
    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
    # tableParam 0 name : name0
    # env : env0
    # serv : serv0
    # meth : meth0
    # input : input0
    # exp : exp0
    # timeout : timeout0
     
    # tableParam 1 name : name1
    # env : env1
    # serv : serv1
    # meth : meth1
    # input : input1
    # exp : exp1
    # timeout : timeout1
     
    # tableParam 2 name : name3
    # env : env3
    # serv : serv3
    # meth : meth3
    # input : input3
    # exp : exp3
    # timeout : timeout3
     
    # tableParam 3 name : name4
    # env : env4
    # serv : serv4
    # meth : meth4
    # input : input4
    # exp : exp4
    # timeout : timeout4
    et enfin au dernier appel

    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
    # tableParam 0 name : name0
    # env : env0
    # serv : serv0
    # meth : meth0
    # input : input0
    # exp : exp0
    # timeout : timeout0
     
    # tableParam 1 name : name1
    # env : env1
    # serv : serv1
    # meth : meth1
    # input : input1
    # exp : exp1
    # timeout : timeout1
     
    # tableParam 2 name : name4
    # env : env4
    # serv : serv4
    # meth : meth4
    # input : input4
    # exp : exp4
    # timeout : timeout4
    pour moi ca a l'air de fonctionner

  18. #18
    Membre confirmé
    Inscrit en
    Avril 2010
    Messages
    200
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 200
    Par défaut
    C'est partie pour une nouvelle journée mais la dernière j'espère !

    @mekal
    Tout d'abord salut !
    Et bien oui, comme l'avait dit Bovino déjà dans un précédent post et je suis d'accord avec vous mon problème vient bien que j'essaie d'effacer des lignes qui n'existent plus, ou plutôt, qui ont été décalées...

    Le truc c'est que chaque fois que je supprime une ligne, le décalage se fait bien dans tableParam mais pas les IDs des champs dans mon tableau "physique", ce que j'essaie de faire...

    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
    61
    62
    var tableParam;
    
    function addParam() {
    	//en javascript null -> undefined
    	//if (tableParam == null)
    	if (tableParam == undefined)
    		tableParam = new Array();
    	 
    	var indice = tableParam.length;
    	//alert('indice : '+indice);
    	// j'ai laissé Array pour rester dans le code original, 
    	// mais je l'aurais bien remplacé par Object
    	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;
    		
    	displayTable();
    
    }
    	
    function removeAdd(bouton) {
    	var node = bouton.parentNode.parentNode;
    	var parent = node.parentNode;
    	parent.removeChild(node);
    
    	nbAddParam--;
    
    	removeItem(node.id);
    	
            //Tentative de décaler les ids des lignes du tableau "physique"
    	for (i = node.id; i < tableParam.length; i++) {
    		document.getElementById(node.id).id = parseInt(node.id)+1;
    	}
    	//tableParam.pop();
    
    	displayTable();
    
    }
    	 
    //une fonction qui ne fait qu'afficher le tableau 
    function displayTable() {
    	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";
    			
    		text += "\n\n";
    	}
    	alert(text);
    		
    }
    	 
    function removeItem(idToRemove) {
    	tableParam.splice(idToRemove, 1);
    }
    @Nicopilami
    Donc oui ton code fonctionne, il me manque juste le redécalage des ids cités plus haut, ou une autre solution parce que l'idée de décaler les IDs des lignes suivantes celle supprimée d'un tableau html... C'est rustre quand même ! (sûrement ce que tu voulais dire Bovino dans ton deuxième post maintenant que j'y pense...)
    Dans mon code j'ai mis en gras les lignes qui sont censées décaler les IDs...

  19. #19
    Membre éclairé Avatar de Nicopilami
    Profil pro
    Ingénieur sécurité
    Inscrit en
    Janvier 2009
    Messages
    354
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur sécurité

    Informations forums :
    Inscription : Janvier 2009
    Messages : 354
    Par défaut
    for (i = node.id; i < tableParam.length; i++) {
    document.getElementById(node.id).id = parseInt(node.id)+1;
    }
    bah oui mais là tu vas écraser les noeuds existants qui ont déjà la valeur de "id+1"

    bon j'ai peut-etre une solution pour ca : si on passait dans l'autre sens ?
    de plus, dans ta fonction, tu modifies i, mais ca sert à quoi vu que ne t'en sers pas ? et comme dit plus haut, on ne pourrait pas zapper le fait de passer par "node.id" ?

    un truc du genre:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    var originalNodeID=node.id
    for (i = tableParam.length-1;i >= originalNodeID; i--) 
    {
       document.getElementById(i).id = i-1;
    }

  20. #20
    Membre confirmé
    Inscrit en
    Avril 2010
    Messages
    200
    Détails du profil
    Informations forums :
    Inscription : Avril 2010
    Messages : 200
    Par défaut
    pour le i dont je ne me sers pas... Je ne fais jamais cette "erreur" en temps normal... . On sent que je teste des trucs sans grand espoir !

    Donc j'ai remplacé mon code avec mon i inutile par le tien mais ça ne fonctionne pas mieux, mais ça réagit différemment.

    Si je supprime la ligne avec l'indice 2, ça donne le même résultat qu'avant :
    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
    tableParam 0 name : name0
    env : env0
    serv : serv0
    meth : meth0
    input : input0
    exp : exp0
    timeout : timeout0
     
    tableParam 1 name : name1
    env : env1
    serv : serv1
    meth : meth1
    input : input1
    exp : exp1
    timeout : timeout1
     
    tableParam 2 name : name3
    env : env3
    serv : serv3
    meth : meth3
    input : input3
    exp : exp3
    timeout : timeout3
     
    tableParam 3 name : name4
    env : env4
    serv : serv4
    meth : meth4
    input : input4
    exp : exp4
    timeout : timeout4
    Si je supprime encore la ligne qui est censée avoir le nouvel id 2 :
    Pas de résultat...

    Si ensuite je supprime la première ligne :
    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
    tableParam 0 name : name3
    env : env3
    serv : serv3
    meth : meth3
    input : input3
    exp : exp3
    timeout : timeout3
     
    tableParam 1 name : name4
    env : env4
    serv : serv4
    meth : meth4
    input : input4
    exp : exp4
    timeout : timeout4
    Donc en gros à la deuxième suppression qui n'affiche rien, je suppose d'après ce résultat qu'il supprime la ligne avec le "name1", étant donné qu'on avait plus l'élément 2 et qu'on supprime "vers le bas" (j'aime mon vocabulaire !)

Discussions similaires

  1. Réponses: 7
    Dernier message: 07/04/2011, 13h47
  2. [PHP 5.0] Supprimer un élément dans un tableau et le ré-indexer
    Par clement106 dans le forum Langage
    Réponses: 6
    Dernier message: 05/12/2009, 20h34
  3. Réponses: 4
    Dernier message: 07/05/2009, 13h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo