Suppression de ligne dans un tableau [Résolu]

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,

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 :

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

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 :

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>

15/06/2011, 16h05	#1
Dave Lopeur Futur Membre du Club Responsable de projet fonctionnel Inscription : mars 2006 Messages : 41 Détails du profil Informations personnelles : Sexe : Âge : 28 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Responsable de projet fonctionnel Secteur : Distribution Informations forums : Inscription : mars 2006 Messages : 41 Points : 15 Points : 15	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...
	00

15/06/2011, 16h37	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 019 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 019 Points : 45 114 Points : 45 114	la réponse est dans this Code : Sélectionner tout - Visualiser dans une fenêtre à part onclick="this.parentNode.removeChild(this)" __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

15/06/2011, 18h13	#7
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 939 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 939 Points : 4 767 Points : 4 767	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 !!!!
	00

15/06/2011, 19h02	#8
javatwister Expert Confirmé danseur Inscription : août 2003 Messages : 2 667 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : danseur Informations forums : Inscription : août 2003 Messages : 2 667 Points : 3 035 Points : 3 035	colle des id avec un repère numérique à tes < tr > et < a >, ça évitera les commandes rocambolesques pour supprimer une ligne; __________________ On ne mord pas, on manifeste seulement notre tristesse face à des exposés de situations qui défient notre entendement binaire.
	00

15/06/2011, 16h49	#3
Dave Lopeur Futur Membre du Club Responsable de projet fonctionnel Inscription : mars 2006 Messages : 41 Détails du profil Informations personnelles : Sexe : Âge : 28 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Responsable de projet fonctionnel Secteur : Distribution Informations forums : Inscription : mars 2006 Messages : 41 Points : 15 Points : 15	effectivement ce n'est pas bête...
	00

15/06/2011, 17h29	#4
Dave Lopeur Futur Membre du Club Responsable de projet fonctionnel Inscription : mars 2006 Messages : 41 Détails du profil Informations personnelles : Sexe : Âge : 28 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Responsable de projet fonctionnel Secteur : Distribution Informations forums : Inscription : mars 2006 Messages : 41 Points : 15 Points : 15	mais ça ne supprime que la cellule contenant le bouton de suppression, et non la ligne comme désiré...
	00

15/06/2011, 21h53	#9
Auteur Expert Confirmé Sénior Inscription : avril 2004 Messages : 4 794 Détails du profil Informations personnelles : Localisation : France Informations forums : Inscription : avril 2004 Messages : 4 794 Points : 5 118 Points : 5 118	bonjour, voir cette discussion : http://www.developpez.net/forums/d33...ligne-tableau/
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email