[javascript / DOM] suppression dynamique d'une ligne de tableau » Programmation » FH

Vous devez vous connecter pour répondre au topic.

[javascript / DOM] suppression dynamique d'une ligne de tableau

grabber
Coordinateur
MacBook Pro 2,4 Powered

Messages : 8 556
Inscrit le 06/03/02
Ville : Angers
Non connecté

Posté le 03 janvier 2007 - 10 h 12 m 22 s

hello et bonne annee à tous étant donné que c'est mon 1er post de 2007 :tut:

alors voila, j'ai un pti probleme de javascript (encore...). je vous explique :

ma page est un formulaire complexe de gestion de contrat d'assurances avec differentes rubriques et une seule validation globale.
sur ce formulaire, j'ai une gestion des garanties du contrat. cette gestion se fait via des lignes d'un tableau suivant le mode suivant :
1ere colonne : 1 select reprenant la liste des garanties
2eme colonne : 1 capital sous forme d'input texte
3eme colonne : 1 franchise sous forme d'input texte
4eme colonne : 1 lien pour virer la ligne courante

au depart, on n'a qu'une seule ligne, avec ces 4 td a l'interieur. seulement, il peut y avoir x garanties donc x lignes, et toutes ces lignes avec la meme structure. j'ai donc ajoute un bouton en dessous du tableau qui me permet de generer une nouvelle ligne a la volee : je clique, une nouvelle ligne apparait.
ca ca marche nikel

mon probleme vient surtout pour la suppression dynamique d'une ligne, la je bloque...
j'ai juste pour l'instant mis un "X" entoure d'un lien. ce que je veux, c'est que si l'utilisateur clic sur un x, il declenche une fonction qui vire la ligne courante.

pour l'ajout, j'injecte dans le dom apres la derniere ligne une copie de la 1ere ligne qui est ma ligne de reference, cette 1ere ligne est facile a trouver, en revanche, ce que j'arrive pa a faire c'est a trouver comment recup l' "identifiant" dans le dom de la ligne que je clic pour la virer

si quelqu'un a une idee, elle est la bienvenue car je seche un peu...

pour l'instant, je test des valeurs qui concernent la node, mais genre this.nodeName me renvoit un undefined, il faudrait que je puisse "adresser" cette ligne pour virer la bonne et pas une autre, tout ca bien entendu sans validation de formulaire...

merci d'avance,

++

grabber
Coordinateur
MacBook Pro 2,4 Powered

Messages : 8 556
Inscrit le 06/03/02
Ville : Angers
Non connecté

Posté le 03 janvier 2007 - 10 h 20 m 58 s

vla une copie d'ecran du "en cours" pour que ce soit plus clair....

au depart bien entendu, il n'y a que la 1ere ligne qui est presente, les autres ont ete generees par le bouton.

grabber
Coordinateur
MacBook Pro 2,4 Powered

Messages : 8 556
Inscrit le 06/03/02
Ville : Angers
Non connecté

Posté le 03 janvier 2007 - 10 h 23 m 47 s

et vla le code provisoire de la ligne :

Code php

 1. // ligne template
 2. echo "        <tr id=\"ligne_template\">\n";
 3. echo "          <td>\n";
 4. echo "            <select name=\"garantie_libelle[]\" class=\"classblue\">\n";
 5. echo "              <option value=\"1\">test 1\n";
 6. echo "              <option value=\"2\">test 2\n";
 7. echo "              <option value=\"3\">test 3\n";
 8. echo "              <option value=\"4\">test 4\n";
 9. echo "            </select>\n";
10. echo "          </td>\n";
11. echo "          <td><div style=\"float: left; width: 90px;\"><input type=\"text\" name=\"garantie_capital[]\" class=\"champ_classblue\" style=\"width: 80px;\" /></div><div style=\"float: left;\">&euro;</div></td>\n";
12. echo "          <td><div style=\"float: left; width: 90px;\"><input type=\"text\" name=\"garantie_franchise[]\" class=\"champ_classblue\" style=\"width: 80px;\" /></div><div style=\"float: left;\">&euro;</div></td>\n";
13. echo "          <td><div style=\"text-align: center;\"><a class=\"lien_orange\" href=\"javascript:delLigneGarantie(this.nodeName);\">X</a></div></td>\n";
14. echo "        </tr>\n";

sachant que la fonction renvoit pour l'instant uniquement un alert de al valeur passee, donc ce que je recherche.

pour moi la methode serait de remonter au noeud parent a partir du X mais j'y arrive pas

Erel69
206
(¯`·.__[T3aM.L1b3rTe©]__.·´¯)

Messages : 19 449
Inscrit le 07/11/01
Ville : Lyon
Non connecté

Posté le 03 janvier 2007 - 15 h 01 m 32 s

Ben tu attribues à chaque ligne un id différent, et tu passes cet id en paramètres de la fonction de suppression.

Quand tu clones ta ligne, il te suffit ensuite de modifier le nouvel objet dom que tu as, d'en changer l'id, et de modifier le lien de suppression.

Ou sinon tu peux tout simplement remonter jusqu'au noeud qui t'interesse. Tu as essayé this.parentNode.parentNode.parentNode ? (pour faire a -> div -> td -> tr)

Obscurité au-delà du crépuscule, pourpre au-delà du sang qui coule, enfoui dans le flot du temps, en ton haut nom, je jure fidélité à l'obscurité. Que les fous qui se dressent devant nous soient détruits, par le pouvoir que toi et moi possédons...

grabber
Coordinateur
MacBook Pro 2,4 Powered

Messages : 8 556
Inscrit le 06/03/02
Ville : Angers
Non connecté

Posté le 03 janvier 2007 - 16 h 12 m 57 s

hello,

alors non car justement je ne veux pas travailler en id, le but est de creer ou detruire autant de lignes que l'on veut a la volee, gerer des ids serait lourd a coder, la je veux me servir uniquement des arrays pour plus de simplicite ensuite a l'enregistrement.

l'idee est plutot d'intrvenir directement sur le DOM, cela pour attaquer la structure elle meme et faire de mon formulaire quelque chose de vraiment dynamique.

mais bon de toute facon j'ai trouve

et oui j'ai un peu fait comme tu dit, vla ma fonction pour ceux que ca interesse :

Code

 1. function delLigneGarantie(bouton) {
 2. 
 3.   // le tr	
 4.   var src_node = bouton.parentNode.parentNode;
 5.   // le noeud parent du tr
 6.   var src_node_parent = src_node.parentNode;
 7.   // suppression du noeud tr
 8.   src_node_parent.removeChild(src_node);
 9. 
10. }

Haut de page

Page genérée en 0.5111 secondes par RahForum 2.0 | Gzip off | Stats | Metaforums | RSS