Suppression de ligne dans un tableau

Version imprimable

15/06/2011, 16h05
Dave Lopeur

Suppression de ligne dans un tableau

Bonjour,

je souhaite créer un tableau ayant un nombre de ligne non défini au départ : je créer par exemple un tableau avec 3 lignes, en dessous j'ai un bouton pour ajouter une ligne à la fin et sur chaque ligne j'ai un bouton permettant de supprimer celle-ci.

Le souci est : comment supprimer les lignes?
Si je génére mon code javascript, le onClick revient à mettre un deleteRow sur mon tableau avec le numéro de ligne mais si j'ai 5 lignes, j'aurais un truc comme ça :

ligne1 (bouton supprimer ligne1)
ligne2 (bouton supprimer ligne2)
ligne3 (bouton supprimer ligne3)
ligne4 (bouton supprimer ligne4)
ligne5 (bouton supprimer ligne5)

Imaginons que l'utilisateur clique pour supprimer la ligne 3, j'aurais ceci après la suppression :

ligne1 (bouton supprimer ligne1)
ligne2 (bouton supprimer ligne2)
ligne3 (bouton supprimer ligne4)
ligne4 (bouton supprimer ligne5)

Donc si l'utilisateru veut ensuite supprimer la 3eme ligne, ça lui supprimera la 4eme et s'il veut supprimer la 4eme, ça génèrera une erreur...

Comment faire donc ? Il doit y avoir une astuce, j'imagine ne pas être le premier à faire ça...

Après je voudrais bouger mes lignes mais ça sera peut-être plus simple, je ne me suis pas encore penché sur la question...
15/06/2011, 16h37
SpaceFrog

la réponse est dans this

Code:

onclick="this.parentNode.removeChild(this)"
15/06/2011, 16h49
Dave Lopeur

effectivement ce n'est pas bête...
15/06/2011, 17h29
Dave Lopeur

mais ça ne supprime que la cellule contenant le bouton de suppression, et non la ligne comme désiré... :(
15/06/2011, 18h04
NoSmoking

Bonjour,

Citation:

Envoyé par Dave Lopeur

mais ça ne supprime que la cellule contenant le bouton de suppression, et non la ligne comme désiré... :(

il te faut dans ce cas remonter encore d'un cran

Code:

onclick="this.parentNode.parentNode.removeChild(this)"

ça ne fonctionne pas non plus : j'ai l'erreur suivante "Erreur*: uncaught exception: [Exception... "Node was not found" code: "8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)" location: ".../My%20Documents/test.html Line: 1"]" dans ma console d'erreur de FF.

Je mets mon code au cas où :

Code:

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
<html>
  <head></head>
  <body>
    <table>
      <tr>
        <td style="border:1px solid black">1</td>
        <td style="border:1px solid black">ligne 1</td>
        <td style="border:1px solid black"><a onClick="this.parentNode.parentNode.removeChild(this)">Suppr.<a></td>
      </tr>
      <tr>
        <td style="border:1px solid black">2</td>
        <td style="border:1px solid black">ligne 2</td>
        <td style="border:1px solid black"><a onClick="this.parentNode.parentNode.removeChild(this)">Suppr.<a></td>
      </tr>
      <tr>
        <td style="border:1px solid black">3</td>
        <td style="border:1px solid black">ligne 3</td>
        <td style="border:1px solid black"><a onClick="this.parentNode.parentNode.removeChild(this)">Suppr.<a></td>
      </tr>
      <tr>
        <td style="border:1px solid black">4</td>
        <td style="border:1px solid black">ligne 4</td>
        <td style="border:1px solid black"><a onClick="this.parentNode.parentNode.removeChild(this)">Suppr.<a></td>
      </tr>
    </table>
  </body>
</html>

15/06/2011, 18h13
NoSmoking

réponse un peu rapide, sans vraiment avoir compris le soucis.
L'erreur est normale le this n'appartient pas au parentNode -2, vu le niveau d'imbrication il te faut écrire

Code:

<a onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)">Suppr.<a>

si c'est pas clair dis le !!!!
15/06/2011, 19h02
javatwister

colle des id avec un repère numérique à tes < tr > et < a >, ça évitera les commandes rocambolesques pour supprimer une ligne;
15/06/2011, 21h53
Auteur

bonjour,

voir cette discussion :
http://www.developpez.net/forums/d33...ligne-tableau/

Merci cool, j'ai écrit mon code comme ça du coup, la fonction numerotation pourra être réutilisée lors de mon ajout de ligne :

Code:

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
<html>
 
  <head>
    <script>
      function delLigne(pObj) {
        pObj.parentNode.parentNode.parentNode.removeChild(pObj.parentNode.parentNode);
        numerotation();
      }
 
      function numerotation() {
        var tableau = document.getElementById('tableau');
        var trs = tableau.rows;
        var n = trs.length;
        var i;
 
        for (i=0; i<n; i++)  {
          trs[i].cells[0].innerHTML = trs[i].rowIndex + 1;
        }
      }
    </script>
  </head>
 
  <body>
    <table id="tableau">
      <tr>
        <td style="border:1px solid black">1</td>
        <td style="border:1px solid black">ligne 1</td>
        <td style="border:1px solid black"><a onClick="delLigne(this)">Suppr.<a></td>
      </tr>
      <tr>
        <td style="border:1px solid black">2</td>
        <td style="border:1px solid black">ligne 2</td>
        <td style="border:1px solid black"><a onClick="delLigne(this)">Suppr.<a></td>
      </tr>
      <tr>
        <td style="border:1px solid black">3</td>
        <td style="border:1px solid black">ligne 3</td>
        <td style="border:1px solid black"><a onClick="delLigne(this)">Suppr.<a></td>
      </tr>
      <tr>
        <td style="border:1px solid black">4</td>
        <td style="border:1px solid black">ligne 4</td>
        <td style="border:1px solid black"><a onClick="delLigne(this)">Suppr.<a></td>
      </tr>
    </table>
  </body>
</html>

Citation:

Envoyé par Dave Lopeur

Merci cool, j'ai écrit mon code comme ça du coup, la fonction numerotation pourra être réutilisée lors de mon ajout de ligne :

Concernant la fonction de numérotation elle ne me parait pas judicieuse dans ton cas, je m'explique.
la propriété rowIndex est fluctuante, si tu supprimes une ligne ayant pour rowIndex 4, par exemple, la ligne suivante prendra sa place donc son rowIndex, tu risques donc de te trouver avec des ID identiques.

Concernant la suppression de la ligne, il faut faire plus générique pour éviter que si par mégarde tu insères un conteneur autour du lien il ne te faille rajouter un parentNode.

exemple pour test:
Code:

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 <!DOCTYPE html> <html lang="fr"> <html> <head> <script type="text/javascript"> function removeLigne( obj){ var oElem = obj.parentNode; while( oElem && oElem.tagName != 'TR'){ oElem = oElem.parentNode; } if( oElem){ alert( 'Ligne à détruire : ' +oElem.rowIndex +'\nparent :' +oElem.parentNode.tagName); oElem.parentNode.removeChild( oElem); } else{ alert( 'le parent n\'est pas une TABLE'); } } </script> </head> <body> <table> <tr><td onclick="removeLigne(this)">ligne 1</td></tr> <tr><td><div onclick="removeLigne(this)">ligne 2</div></td></tr> <tr><td><form><div onclick="removeLigne(this)">ligne 3</div></form></td></tr> </table> <div onclick="removeLigne(this)">autre ligne</div> </body> </html>