Re-numéroation de champ après suppression de lignes d'un tableau

Re-numéroation de champ après suppression de lignes d'un tableau - HTML/CSS - Programmation

Marsh Posté le 06-04-2006 à 15:57:06    

Bonjour, me revoila avec mes questions javacript  :pt1cable:  
 
J'ai déjà posé une question portant sur la création dynamique de tableau.
Maintenant pas de problème avec l'ajout de ligne. Après avoir lu quelque tuto je sais supprimer des lignes.
 
Par contre pour ce qu'il y est de la création de fonctions js, je suis loin d'être au top  :o  
Après avoir supprimé une ligne du tableau, il faut logiquement que je m'occupe de la renumérotation des lignes et des champs.
Je sais faire en php mais pas en javascript.
 
Voici un exemple de code qui marche pour la suppression de la première ligne, lorsque le tableau comporte deux lignes. Pour que ca marche avec toutes les lignes il faudrais que je fasse une boucle avec des paramètres au lieu de valeurs fixes, et c'est la que je bloque.

Code :
  1. function supprimer_ligne(no_ligne)
  2.     {
  3.     /* cas ou l'utilisateur supprime la première ligne */
  4.     if (no_ligne = 1)
  5.     {
  6.      document.getElementById('details_cde').deleteRow(1);
  7.           
  8.      document.getElementById('ligne_2').setAttribute("id", 'ligne_1');
  9.      document.getElementById('ligne_1').innerHTML = 1;
  10.      document.getElementById('qte_2').setAttribute("id", 'qte_1');
  11.      document.getElementById('qte_1').setAttribute("readonly", 'readonly');
  12.      document.getElementById('lib_2').setAttribute("id", 'lib_1');
  13.      document.getElementById('code_produit_2').setAttribute("id", 'code_produit_1');     
  14.      document.getElementById('delaisJJ_2').setAttribute("id", 'delaisJJ_1');
  15.      document.getElementById('delaisMM_2').setAttribute("id", 'delaisMM_1');
  16.      document.getElementById('delaisAA_2').setAttribute("id", 'delaisAA_1');
  17.      document.getElementById('remise_2').setAttribute("id", 'remise_1');
  18.      document.getElementById('remise_1').setAttribute("readonly", 'readonly');
  19.      document.getElementById('prix_net_2').setAttribute("id", 'prix_net_1');
  20.      document.getElementById('prix_net_1').setAttribute("readonly", 'readonly');
  21.      document.getElementById('code_taxe_2').setAttribute("id", 'code_taxe_1');    
  22.      document.getElementById('montant_ht_2').setAttribute("id", 'montant_ht_1');
  23.     
  24.      nb_ligne --;     
  25.     }    
  26.    
  27.    
  28.     /* cas ou l'utilisateur supprime la dernière ligne */
  29.     else if (no_ligne = nb_ligne)
  30.     {
  31.      document.getElementById('details_cde').deleteRow(-1);
  32.     
  33.      nb_ligne --;     
  34.     }    
  35.     }


 
Si quelqu'un pouvais me donner un exemple de boucle pour ce cas, je pourais l'appliquer pour la supression d'une ligne intermédiaire en lancant la boucle pour toutes les lignes > à la ligne supprimée.
Pour ce qu'il est est de la dernière ligne pas de problèmes.
 
Par contre j'ai du me tromper dans la syntaxe de mes if, car ca supprime toujours la première ligne. Et si je met que le code pour la suppression de la dernière ligne ca marche.
 
Merci d'avance pour votre aide  :jap:

Message cité 1 fois
Message édité par mc_cut_killer le 06-04-2006 à 16:15:16
Reply

Marsh Posté le 06-04-2006 à 15:57:06   

Reply

Marsh Posté le 07-04-2006 à 09:29:06    

Up, personne peut me donner un coup de main !?
 
Car j'voie pas ou est le problème dans mon if et else if :(

Reply

Marsh Posté le 07-04-2006 à 10:05:24    

mc_cut_killer a écrit :

Par contre pour ce qu'il y est de la création de fonctions js, je suis loin d'être au top  :o  
Après avoir supprimé une ligne du tableau, il faut logiquement que je m'occupe de la renumérotation des lignes et des champs.


Autant je comprends l'interet de renuméroter les lignes autant les ids je comprends pas ...  
 
Bon mais sinon en gros ça doit donner quelque chose comme:

Code :
  1. function supprimer_ligne(no_ligne){
  2. // tu récupères le nb de lignes
  3. var nbLignes = document.getElementById('details_cde').getElementsByTagName('tr').length;
  4. // la tu vires la lignes, si j'ai tout compris tu fais:
  5. document.getElementById('ligne_1').innerHTML = 1;
  6. // ensuite tu boucles pour tout ceux qui sont "supérieurs"
  7. for(var i=no_ligne+1; i<nbLignes; i++){
  8.     //et tu fais ton bouzin sur les lignes en te servant de i     
  9. }
  10. }


Message édité par anapajari le 07-04-2006 à 10:14:00
Reply

Marsh Posté le 07-04-2006 à 10:07:20    

Bonjour,
 
C'est difficile de répondre, parce que ce morceau de code ne montre pas d'où vient le numéro de ligne, et donc il est difficile de dire pourquoi c'est la première ligne ou la dernière ligne qui est supprimée.
 
Mais peut-être qu'il s'agit du problème classique, où plusieurs suppressions sont faites à la suite, et où le programmeur ferait l'erreur de penser qu'il faudrait incrémenter le numéro de ligne pour supprimer la ligne suivante, parce qu'il ignorerait que le browser remet à jour les numéros de ligne après chaque suppression, et donc qu'en fait, il ne faut pas incrémenter le numéro de ligne quand on passe à la ligne suivante, car cette ligne suivante a glissé d'un cran et est devenue la ligne précédente par rapport à avant.

Reply

Marsh Posté le 07-04-2006 à 10:41:15    

En fait j'ai une commande avec le détails. Ce détail est composé de plusieurs lignes avec plusieurs champs.
 
Au final, j'envoie mon formulaire pour l'enregistrement dans la base de donnée.
Après avoir lu plusieurs tutoriaux sur le sujet, j'ai vu que la plupart utilisait des ids pour récupérer les infos de leurs champs (ce qui n'est pas le plus pratique à ce qu'on m'a dit) mais bon j'ai fait comme ca.
Deplus j'ai des informations qui se change en directe pour xmlhttprequest et la aussi j'utilise les id pour repérer les zones que je dois changer.
 
Du coup j'ai initialisé une variable nb_ligne que s'incrémente à chaque création de lignes. Donc pour une ligne tous mes champs ont pour id nom_du_champ_[nb_ligne]
Quand je supprime une ligne il faut donc que je remette à jour ces informations. Non seulement pour les récupérer dans de bonne conditions, mais aussi pour pouvoir ajouter d'autres lignes.
 
Lorsque je fais ca en php, je dit que si la ligne 1 est supprimé alors il suffit de décrémenté toutes les autres ligne de 1.
Si c'est la ligne n qui est effaçé je fait la même action pour les lignes > n.Enfin pour la dernière je décrémente nb_ligne de 1 et je la supprime.
 
Je vais essayé ton model de fonction anapajari, par contre je comprend pas pourquoi mes conditions marchent pas. Normalement il devrait suffir de dire :
Si mon numéro de ligne est 1 on est dans le cas 1.
Si mon numéro est égal au nombre de lignes c'est le dernier cas.
Sinon il faut passé au cas de la ligne intermédiaire.
 
Et la quoi qu'il en soit ca excécute mon premier if, pourtant si je met des alert il trouve bien nb_ligne qui correspond au nombre totale de ligne, et no_ligne qui correspond à la ligne en cour.
Si je met que la cas de la suppression de la dernière ligne ca marche, c'est pour ca que je me demande si j'ai la bonne syntaxe pour mes if et else if.


Message édité par mc_cut_killer le 07-04-2006 à 10:42:48
Reply

Marsh Posté le 07-04-2006 à 11:22:16    

Bon, il semble que je suis vraiment mauvais.
Voila la fonction que je veut utiliser pour la suppression de la première ligne, sachant que j'ai déjà un variable nb_ligne qui prend ++ à chaque ajout de ligne.
 

Code :
  1. if (no_ligne = 1)
  2.     {
  3.      document.getElementById('details_cde').deleteRow(1);
  4.           
  5.      for(var i=no_ligne+1; i<nb_ligne; i++)
  6.      {
  7.       document.getElementById('ligne_2').setAttribute("id", 'ligne_1');
  8.       document.getElementById('ligne_1').innerHTML = 1;
  9.       document.getElementById('qte_2').setAttribute("id", 'qte_1');
  10.       document.getElementById('qte_1').setAttribute("readonly", 'readonly');
  11.       document.getElementById('lib_2').setAttribute("id", 'lib_1');
  12.       document.getElementById('code_produit_2').setAttribute("id", 'code_produit_1');     
  13.       document.getElementById('delaisJJ_2').setAttribute("id", 'delaisJJ_1');
  14.       document.getElementById('delaisMM_2').setAttribute("id", 'delaisMM_1');
  15.       document.getElementById('delaisAA_2').setAttribute("id", 'delaisAA_1');
  16.       document.getElementById('remise_2').setAttribute("id", 'remise_1');
  17.       document.getElementById('remise_1').setAttribute("readonly", 'readonly');
  18.       document.getElementById('prix_net_2').setAttribute("id", 'prix_net_1');
  19.       document.getElementById('prix_net_1').setAttribute("readonly", 'readonly');
  20.       document.getElementById('code_taxe_2').setAttribute("id", 'code_taxe_1');    
  21.       document.getElementById('montant_ht_2').setAttribute("id", 'montant_ht_1');
  22.      }
  23.     
  24.      nb_ligne --;     
  25.     }


 
Par conséquent se devrais remplaçer tout les 2 pour i et les 1 par i-1.
Mais ca marche pas  :pt1cable:

Message cité 1 fois
Reply

Marsh Posté le 07-04-2006 à 11:29:00    

mc_cut_killer a écrit :

Mais ca marche pas  :pt1cable:


 :fou: :fou:  :fou:  S'trop compliqué d'expliquer ce qui marche pas??? Erreur JS? Rien qui se passe? Bref...
 
De toute façon ton algo est foireux, ce que tu dois faire c'est:

- enlever la ligne dont le numéro est passé en paramètre
- décaler toutes les lignes dont le numéro est supérieur au paramètre


 
Y'avait une légère boulette dans le code que je t'avais donné:

Code :
  1. function supprimer_ligne(no_ligne){
  2.       // tu récupères le nb de lignes
  3.       var nbLignes = document.getElementById('details_cde').getElementsByTagName('tr').length;
  4.       // la tu vires la lignes, si j'ai tout compris tu fais:
  5.       document.getElementById('ligne_'+i).innerHTML = 1;
  6.       // ensuite tu boucles pour tout ceux qui sont "supérieurs"
  7.       for(var i=no_ligne+1; i<nbLignes; i++){
  8.          //et tu fais ton bouzin sur les lignes en te servant de i : document.getElementById('tonChamps_'+i)
  9.       }
  10.    }


 
Et ton nb_ligne ne sert strictement a rien tu peux toujours l'avoir grace à :

Code :
  1. document.getElementById('details_cde').getElementsByTagName('tr').length


Message édité par anapajari le 07-04-2006 à 11:32:41
Reply

Marsh Posté le 07-04-2006 à 11:33:54    

Quand je dit ca marche pas sans préciser, rien ne se passe et les champs conservent le même numéro.
 
Pour nb_ligne, c'est ce que j'ai trouvé de plus simple pour savoir mon no de ligne, mais le problème n'est pas la.
 
J'vais voir ce que ca donne avec ton nouveau code :)

Reply

Marsh Posté le 07-04-2006 à 11:52:24    

C'est bon :)
Je viens de réussir à adapter ton code et ca marche, voila ce que j'ai fait :

Code :
  1. if (no_ligne = 1)
  2.     {
  3.      document.getElementById('details_cde').deleteRow(1);
  4.     
  5.     
  6.      for(var i=no_ligne; i<nb_ligne; i++)
  7.      {
  8.       var j=i+1;
  9.      
  10.       document.getElementById('ligne_'+j).setAttribute("id", 'ligne_'+i);
  11.       document.getElementById('ligne_'+i).innerHTML = +i;
  12.       document.getElementById('qte_'+j).setAttribute("id", 'qte_'+i);
  13.       document.getElementById('qte_'+i).setAttribute("readonly", 'readonly');
  14.       document.getElementById('lib_'+j).setAttribute("id", 'lib_'+i);
  15.       document.getElementById('code_produit_'+j).setAttribute("id", 'code_produit_'+i);     
  16.       document.getElementById('delaisJJ_'+j).setAttribute("id", 'delaisJJ_'+i);
  17.       document.getElementById('delaisMM_'+j).setAttribute("id", 'delaisMM_'+i);
  18.       document.getElementById('delaisAA_'+j).setAttribute("id", 'delaisAA_'+i);
  19.       document.getElementById('remise_'+j).setAttribute("id", 'remise_'+i);
  20.       document.getElementById('remise_'+i).setAttribute("readonly", 'readonly');
  21.       document.getElementById('prix_net_'+j).setAttribute("id", 'prix_net_'+i);
  22.       document.getElementById('prix_net_'+i).setAttribute("readonly", 'readonly');
  23.       document.getElementById('code_taxe_'+j).setAttribute("id", 'code_taxe_'+i);    
  24.       document.getElementById('montant_ht_'+j).setAttribute("id", 'montant_ht_'+i);
  25.      }
  26.     
  27.      nb_ligne --;     
  28.     }


 
Maintenant dernière petite question à la con, pourquoi lorsque je fais :

Code :
  1. function supprimer_ligne(no_ligne)
  2.     {
  3.     if (no_ligne = 1)
  4.     {
  5.     suppression ligne 1 ...    
  6.     }    
  7.    
  8.    
  9.     else if (no_ligne = nb_ligne)
  10.     {
  11.      suppression dernière ligne    
  12.     }    
  14.             else
  15.     {
  16.      suppression intermédiaire
  17.     }    
  18.     }


il me lance tout le temps le premier if ?

Reply

Marsh Posté le 07-04-2006 à 11:56:55    

parce qu'il faut mettre == dans les ifs pour tester une condition... Sinon tu fais une affectation.  
Par ailleurs ton truc est toujours dégueux :o laisse moi 5 mins je te montre comment j'aurrais fait...

Reply

Marsh Posté le 07-04-2006 à 11:56:55   

Reply

Marsh Posté le 07-04-2006 à 11:58:18    

Ok merci :)
 
Domage que certains tutoriaux du net propose des truc faut, sur un site il disait que la différence entre le javascript et le php était que l'on n'utilisait pas == mais = :(
 
 
Edit: pfff voila ca marche, moralité jamais faire confiance à personne lol


Message édité par mc_cut_killer le 07-04-2006 à 11:59:55
Reply

Marsh Posté le 07-04-2006 à 12:22:21    

donc j'aurais fait ça!!!
pour l'html:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Test</title>
  7.   <script type="text/javascript">
  8.   function addLine(){
  9.     var tbNode = document.getElementById('t');
  10.     var trNode = document.createElement('tr');
  11.     /*** col 1: no line***/
  12.     var tdNode = document.createElement('td');
  13. tdNode.innerHTML = tbNode.getElementsByTagName('tr').length;
  14. trNode.appendChild(tdNode);
  15.     /*** col 2: lib ***/
  16.         tdNode = document.createElement('td');
  17.     var inpNode= document.createElement('input');
  18.         inpNode.setAttribute('type', 'text');
  19.         inpNode.setAttribute('name', 'lib[]');
  20. tdNode.appendChild(inpNode);
  21. trNode.appendChild(tdNode);
  22.     /*** col 3: price ***/
  23.         tdNode = document.createElement('td');
  24.         inpNode= document.createElement('input');
  25.         inpNode.setAttribute('type', 'text');
  26.         inpNode.setAttribute('name', 'price[]');
  27. tdNode.appendChild(inpNode);
  28. trNode.appendChild(tdNode);
  29.     /*** col 4: delete***/
  30.         tdNode = document.createElement('td');
  31.         inpNode= document.createElement('input');
  32.         inpNode.setAttribute('type', 'button');
  33.         inpNode.setAttribute('value', 'sup.');
  34.         inpNode.onclick= function(event) { deleteLine(this); }
  35. tdNode.appendChild(inpNode);
  36. trNode.appendChild(tdNode);
  38.     /*** add line to table ***/
  39.     tbNode.appendChild(trNode);
  40.   }
  42.   function deleteLine(inpObj){
  43.     /*** line is parentNode of inpObj's parentNode ***/
  44.     document.getElementById('t').removeChild(inpObj.parentNode.parentNode);
  45.     /*** reset line no ***/
  46.     setLineNo();
  47.   }
  49.   function setLineNo(){
  50.     var lineTab = document.getElementById('t').getElementsByTagName('tr');
  51.     for ( var i=0; i<lineTab.length; i++){
  52.       lineTab[i].firstChild.innerHTML = i;
  53.     }
  54.   }
  56.   </script>
  57. </head>
  58. <body >
  59. <form name="f" action="tonScript.php" method="post">
  61.   <table id="t">
  62.    <tr>
  63.     <td>Colonne 1: Nu ligne</td>
  64.     <td>Colonne 2: Lib.</td>
  65.     <td>Colonne 1: Prix</td>
  66.     <td>Supprimer</td>
  67.    </tr>
  69.   </table>
  70.   <input type="button" value="Ajouter une ligne" onclick="addLine()"/>
  71.   <input type="submit" value="valider" />
  72. </form>
  73. </body>
  74. </html>


 
Et pour le php tu t'en foutais du coup tu récupérais des tableaux pour chacune des  colonnes, comme le prouve ce petit...

Code :
  1. <?php
  2. print_r($_POST);
  3. ?>


Message édité par anapajari le 07-04-2006 à 12:23:55
Reply

Marsh Posté le 07-04-2006 à 12:25:42    

Un grand merci ton aide,
 
je vais étudier la question cette après-midi.
 
Bon week end et @+  :hello:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed