Discussion :

[Air P-E]

Bonjour à tous !

Je rencontre un problème que je ne comprends absolument pas, et j'ai besoin de vous pour trouver la logique du truc et m'aider à résoudre mon problème !

J'ai un tableau en html créé dynamiquement en javascript, j'y ajoute des lignes, et quand je supprime une ligne en plein milieu je suis obligé de ré-indexé mes lignes suivantes, j'entends par là qu'il faut que je change l'attribut name de chaque ligne de -1...

Le truc que je ne comprends pas, c'est que ça ne re-indexe pas comme il faut (on s'en serait douté... ) mais je ne comprends vraiment pas pourquoi d'après mes alertes que j'affiche... Mes alertes m'affichent exactement ce que ça devrait faire mais au final, ça ne se passe absolument pas comme je le souhaite...

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
try{
        document.getElementById('param_services_nb_add_param').value = --this.nbAddParam;
 
        var index = row.rowIndex;
 
        // Supression de la ligne passé en paramètre
        row.parentNode.removeChild(row);
 
        // Suppresion du textarea de l'input correspondant.
        var current = index-this.nbParam;
        var inputToDelete = document.getElementById('param_services_new_input'+current);
        inputToDelete.parentNode.removeChild(inputToDelete);
 
        // Une fois la ligne supprimé on ré-index le nom des champs suivants pour faciliter l'affichage
        // et l'utilisation plus tard, pour permettre une simple boucle.
        if (index !== this.table.rows.length) {
            var arrayRow = this.table.rows;
            var imax = arrayRow.length;
 
            // Ré-indexation de -1 des cas de tests ajoutés suivant celui supprimé.
            for (index; index < imax; index++) {
                var current = index-this.nbParam;
                var next = current+1;
 
                //alert('1 : '+arrayRow[index].childNodes[0].firstChild.name+'\n'+document.getElementById('param_services_new_input'+next).name);
 
                var nextInput = document.getElementById('param_services_new_input'+next);
                alert(nextInput.name+'\n'+nextInput.value);
                nextInput.name = 'param_services_new_input'+current;
                nextInput.id = 'param_services_new_input'+current;
                alert(nextInput.name+'\n'+nextInput.value);
                arrayRow[index].childNodes[0].firstChild.name = 'param_services_new_name'+current;
                arrayRow[index].childNodes[1].firstChild.name = 'param_services_new_environment'+current;
                arrayRow[index].childNodes[2].firstChild.name = 'param_services_new_service'+current;
                arrayRow[index].childNodes[3].firstChild.name = 'param_services_new_method'+current;
                arrayRow[index].childNodes[3].firstChild.id = 'param_services_new_method'+current;
                arrayRow[index].childNodes[5].firstChild.name = 'param_services_new_timeout'+current;
                arrayRow[index].childNodes[6].firstChild.name = 'param_services_new_exp'+current;
 
                //alert('2 : '+arrayRow[index].childNodes[0].firstChild.name+'\n'+document.getElementById('param_services_new_input'+next).name);
            }
        }
        }catch(e){alert('Exception : '+e);}

Merci d'avance !

[RomainVALERI]

Le contexte est trop incomplet : ton extrait commence avec des références à this et row qui ne nous sont pas connues car non fournies... tu pourrais nous situer l'extrait ?

De plus, typiquement pour ce genre de souci liés au DOM, difficile de travailler sans voir l'HTML (au minimum l'élément dans lequel doit être inséré ton tableau dynamique)

[Air P-E]

oui effectivement désolé !

this fait simplement référence à ma "classe", on va dire mon fichier dans lequel je suis...
row, est la ligne à supprimer que je passe en paramètre à ma fonction, qui ne contient rien d'autre que ce que j'ai posté avant.

Pour le code html, il n'y a vraiment pas grand chose !

Code :

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

1
2
3
4
5
6
7
8
9
<form method="post" id="param_services_form" name="param_services_process" action="">
                <div id="param_services_div_edit_table" >
                </div>
                <div id="param_services_div_input" style="display:none">
                </div>
                <br />
                <input type="button" id="param_services_btn_add_param" value=" + " />
                <input type="submit" id="param_services_btn_valider" name="param_services_btn_valider" value="Valider" />
            </form>

La première div contient le tableau généré dynamiquement et la seconde contient plusieurs textarea. Pour être plus précis un textarea par ligne dans mon tableau.

J'ai trouvé d'où vient mon problème. En fait je n'arrive pas redéfinir l'id de ma textarea...
apparemment je ne peux pas faire : document.getElementById('textarea').id = 'id';
avec le setAttribute, forcément ça ne marche pas mieux !
Ensuite je me suis dit qu'au final je n'avais pas besoin de redéfinir l'id mais juste l'attribut name de mon textarea, seulement j'ai encore des référence à null que je ne comprends pas...

voici mon code actuel :

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
removeAdd : function(row) {
        try{
        document.getElementById('param_services_nb_add_param').value = --this.nbAddParam;
 
        var index = row.rowIndex;
 
        // Supression de la ligne passé en paramètre
        row.parentNode.removeChild(row);
 
        // Suppresion du textarea de l'input correspondant.
        var current = index-this.nbParam;
        var inputToDelete = document.getElementById('param_services_new_input'+current);
        inputToDelete.parentNode.removeChild(inputToDelete);
 
        // Une fois la ligne supprimé on ré-index le nom des champs suivants pour faciliter l'affichage
        // et l'utilisation plus tard, pour permettre une simple boucle.
        if (index !== this.table.rows.length) {
            var arrayRow = this.table.rows;
            var imax = arrayRow.length;
            //var parentDiv = document.getElementById('param_services_div_input');
 
            // Ré-indexation de -1 des cas de tests ajoutés suivant celui supprimé.
            for (index; index < imax; index++) {
                var current = index-this.nbParam;
                var next = current+1;
 
                if (index !== imax-1) {
 
                    arrayRow[index].childNodes[0].firstChild.name = 'param_services_new_name'+current;
                    arrayRow[index].childNodes[1].firstChild.name = 'param_services_new_environment'+current;
                    arrayRow[index].childNodes[2].firstChild.name = 'param_services_new_service'+current;
                    arrayRow[index].childNodes[3].firstChild.name = 'param_services_new_method'+current;
                    arrayRow[index].childNodes[3].firstChild.id = 'param_services_new_method'+current;
                    //arrayRow[index].childNodes[4].firstChild.id = 'param_services_new_display'+current;
                    arrayRow[index].childNodes[5].firstChild.name = 'param_services_new_timeout'+current;
                    arrayRow[index].childNodes[6].firstChild.name = 'param_services_new_exp'+current;
                    document.getElementById('param_services_new_input'+next).name = 'param_services_new_input'+current;
                }
            }
        }
        }catch(e){alert('Exception : '+e);}
    },

EDIT :

Ensuite je me suis dit qu'au final je n'avais pas besoin de redéfinir l'id mais juste l'attribut name de mon textarea, seulement j'ai encore des référence à null que je ne comprends pas...

C'est normal... pour changer le nom je récupère suivant l'id... Mais si je ne ré-indexe pas les ids, obligatoirement à la prochaine boucle il ne peut pas trouver mon élément !!
Je suis donc obligé de changer mes ids aussi !

RE-EDIT : J'aime beaucoup ton générateur de phrase ! Ça m'a bien fait rire !!
Voici des résultats que j'ai bien aimé !
"Presque toutes les filles s'installeront au Japon." (meuuuh non ! Partez pas les filles ! )
"Je propose d'apprendre Blanche-Neige à un médecin."
"À l'arrêt du tram, les pompiers daignent agoniser." ('sont méchant les pompiers pour agoniser s'ils doivent sauver quelqu'un à l'arrêt de tram !