Suppression de ligne dans un tableau

**Dave Lopeur** · 15/06/2011, 16h05

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...

**SpaceFrog** · 15/06/2011, 16h37

la réponse est dans this

Code :

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

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

**Dave Lopeur** · 15/06/2011, 16h49

effectivement ce n'est pas bête...

**Dave Lopeur** · 15/06/2011, 17h29

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

**NoSmoking** · 15/06/2011, 18h04

Bonjour,

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 :

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

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

**Dave Lopeur** · 15/06/2011, 18h07

ç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 :

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
<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>

**NoSmoking** · 15/06/2011, 18h13

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 :

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

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

si c'est pas clair dis le !!!!

**javatwister** · 15/06/2011, 19h02

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

**Auteur** · 15/06/2011, 21h53

bonjour,

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

**Dave Lopeur** · 16/06/2011, 09h55

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 :

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
<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>

**NoSmoking** · 16/06/2011, 18h21

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 :

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
<!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>

Suppression de ligne dans un tableau

JavaScript

Discussions similaires

Partager

Partager