suppression de ligne d'un tableau

**benyasla** · 11/05/2007, 14h45

Bonjour
J'ai un ptit souci avec javascript!! dans une colonne d'un tableau j'ai supprimé pour supprimer la ligne que je veux dans le tableau. chaque ligne rajoutée dans le tableau j'ai un bouton supprimer!
quand je click sur supprimer je n'arrive pas a supprimer la ligne que je veux, mais seulement la derniere ligne d'un tableau !! est ce quelqu'1 pourrai me dire comment faire ?

voici mon code:

Code html :

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
48
49
50
<html>
<head>
<script LANGUAGE="JavaScript">
function ligne()
{
num = 0;
var Cell;
var nom = document.forms["formulaire"].nom.value;
var prenom = document.forms["formulaire"].prenom.value;
var tableau = document.getElementById('tableau');
var ligne = tableau.insertRow(-1); 
 
Cell = ligne.insertCell(0);
Cell.innerHTML = num + 1;				
Cell = ligne.insertCell(1);
Cell.innerHTML = nom;
Cell = ligne.insertCell(2); 
Cell.innerHTML = prenom;
Cell = ligne.insertCell(3);
Cell.innerHTML = ("<input type=button name=supprimer value=Supprimer onclick=suppression()>");
document.forms["formulaire"].nom.value = "";
document.forms["formulaire"].prenom.value = "";
 
}
</script>
</head>
<body>
<script LANGUAGE="JavaScript">
function suppression()
{
var nb = document.getElementById('tableau').rows.length;
document.getElementById('tableau').deleteRow(-1);
 
}
</script>
<form name="formulaire">
Nom <input type="text" name="nom"><br>
Prenom <input type="text" name="prenom"><br>
<table name= "tableau" id="tableau" border="1">
<tr>
<td>Numéro de ligne</td>
<td>Nom</td>
<td>Prenom</td>
<td>Supprimer la ligne</td>
</tr> 
</table>
</form>
<div><input type="submit" value="Ajouter une ligne" onClick="ligne()" ></div> <br>
</body>
</html>

Merci pour votre aide

**Auteur** · 11/05/2007, 19h52

bonjour,

le souci est au niveau de la focntion suppression :

Code javascript :

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

1
2
 
document.getElementById('tableau').deleteRow(-1);

tu effaces toujours la dernière ligne.

Voici ton code corrigé (en vert mes corrections et j'ai mis en bleu et en commentaires le code d'origine

)

Code html :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
<head>
<script type="text/javascript">
<!--

function ajoutLigne()
{
  //num = 0;
  var Cell;
  var nom = document.forms["formulaire"].nom.value;
  var prenom = document.forms["formulaire"].prenom.value;
  var tableau = document.getElementById('tableau');
  var ligne = tableau.insertRow(-1); 
  
  
  Cell = ligne.insertCell(0);
  //Cell.innerHTML = num + 1;
  Cell.innerHTML = ligne.rowIndex;
  
  Cell = ligne.insertCell(1);
  Cell.innerHTML = nom;
  Cell = ligne.insertCell(2); 
  Cell.innerHTML = prenom;
  Cell = ligne.insertCell(3);

  //Cell.innerHTML = ("<input type=button name=supprimer value=Supprimer onclick=suppression()>");  
  var bouton = document.createElement("input");
  bouton.type = "button";
  bouton.value = "Supprimer";
  bouton.onclick = function(){suppression(ligne)};
  Cell.appendChild(bouton);
  
  
  document.forms["formulaire"].nom.value = "";
  document.forms["formulaire"].prenom.value = "";

}

function suppression(ligne)
{
 
  //var nb = document.getElementById('tableau').rows.length;
  //document.getElementById('tableau').deleteRow(-1);

  document.getElementById('tableau').deleteRow(ligne.rowIndex);

  //Recomptage des lignes...
  var tableau = document.getElementById('tableau');
  var trs = tableau.rows;
  var n = trs.length;
  var i;

  for (i=1; i<n; i++) //on commence à 1 et non à 0 ;)
  {
    trs[i].cells[0].innerHTML = trs[i].rowIndex;
  }

}


//-->
</script>

</script>
</head>
<body>

<form name="formulaire">
Nom <input type="text" name="nom"><br>
Prenom <input type="text" name="prenom"><br>
<table name= "tableau" id="tableau" border="1">
<tr>
<td>Numéro de ligne</td>
<td>Nom</td>
<td>Prenom</td>
<td>Supprimer la ligne</td>
</tr> 
</table>
</form>
<div><input type="button" value="Ajouter une ligne" onclick="ajoutLigne()" ></div> <br>
</body>


</html>

j'ai modifié le nom de la fonction ligne() en ajoutLigne() pour éviter la confusion avec la variable ligne
j'ai remplacé le bouton de type "submit" (sans intéret ici) par un bouton de type "button".
à chaque suppression de ligne je mets à jour l'indice des lignes (fonction suppression() )
le code fonctionne sous IE et Firefox

Remarques :
Remplace le paramètre name au profit du paramètre id, l'accès aux éléments sera ainsi plus facile. Par exemple :

Code html :

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

1
2
 
  Prenom <input type="text" id="prenom">

Code javascript :

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

1
2
 
  var prenom = document.getElementById("prenom").value;

cela évite les

Code javascript :

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

  var prenom = document.forms["formulaire"].prenom.value;

**alaska750** · 06/10/2009, 23h13

Bonsoir,

J'ai ré-adapté le code ci-dessus afin qu'il m'initialise et me crée à chaque appel de la fonction, un tableau dynamique en fonction d'une chaine (de la forme: toto,tata,titi,x,y,z) passés en argument via la variable valeur.. le nombre de ligne affiché dépend du nombre de nom trouvé dans la chaine. Cette réadaptation du code fait que la suppression des lignes ne fonctionne plus correctement (bein voyons ...ca m'aurait étonné

)
En effet, chaque suppression à pour effet de toujours supprimer la dernière ligne !

Je met le code mis à jour dans le cas ou quelqu'un pourrait m'aider...

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
function creetableau(valeur)
{
  document.getElementById('tableau').innerHTML = "";
  var Cell;
  var tableau = document.getElementById('tableau');
  var chaine = valeur;
  var tab = chaine.split(',');
  var nbrRow = tab.length;
 
  for (var i = 0; i<nbrRow; i++){
  	var ligne = tableau.insertRow(-1);
 
 	Cell = ligne.insertCell(0);
  	Cell.innerHTML = ligne.rowIndex;
 
  	Cell = ligne.insertCell(1);
  	Cell.innerHTML = tab[i];
  	Cell = ligne.insertCell(2);
 
  	var bouton = document.createElement("input");
  	bouton.type = "button";
  	bouton.value = "Supprimer";
  	bouton.onclick = function(){suppression(ligne)};
  	Cell.appendChild(bouton);
  }
}
 
function suppression(ligne)
{
  document.getElementById('tableau').deleteRow(ligne.rowIndex);
 
  //Recomptage des lignes...
  var tableau = document.getElementById('tableau');
  var trs = tableau.rows;
  var n = trs.length;
  var i;
 
  alert(n);
  for (i=1; i<n; i++) //on commence à 1 et non à 0 ;)
  {
    trs[i].cells[0].innerHTML = trs[i].rowIndex;
  }
}

Un grand Merci d'avance pour votre aide et suggestion.

**emmanuel.remy** · 07/10/2009, 00h28

Salut,

Quand tu écris

Code :

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

bouton.onclick = function(){suppression(ligne)};

tu fais une erreur: au moment du clic JS évalue la fonction et alors ligne vaut sa dernière affectation, soit la dernière ligne...

Tu devrais plutôt écrire:

Code :

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

1
2
3
4
5
6
 
bouton.onclick = function(row){ 
                         return function() {
                         suppression(row);
                       };
                }(ligne);

ERE

**alaska750** · 07/10/2009, 21h11

Hello !
Je suis impressionné par la solution proposée ... j'avoue également ne pas avoir tout compris à cette dernière (je suis preneur pour q.q explications supplémentaires, au cas ou) MAIS, ton raisonnement fut correct ... Ca fonctionne à merveille !

UN GRAND MERCI à toi !!!!

Devant une telle maitrise je serais même tenté de poser une autre question...au cas ou un autre coup de génie pareil me serait proposé (là j'abuse un peu, mais qui ne tente rien n'a rien...)

Mon nouveau Problème:
Maintenant que j'arrive à supprimer les lignes, je doit pouvoir récupérer le n° de ligne supprimée dans le but de mettre à jour une variable $SESSION. Le problème est qui dit var. SESSION dit coté serveur donc non accessible à javascript..(super

). saurais-tu comment procéder pour effectuer cela ?
Je pensais éventuellement faire appel à un iframe qui appelerait une page php dans lequel je récupèrerais du manière ou d'une autre l'information de la ligne supprimé...puis irais via un scan en php supprimer ma variable session ...mais cela me semble juste impossible à réaliser ... qu'en penses-tu ?

encore pour le coup de main sur la suppression de ligne du tabeau !

**emmanuel.remy** · 08/10/2009, 00h49

Re,

Quand tu écris

Code :

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

bouton.onclick = function(){suppression(ligne)};

alors JS crée la fonction et note la référence à la variable ligne. Ensuite lors du clic la fonction est déclenchée et la variable ligne est évaluée. Elle prend donc la dernière valeur affectée, celle à la sortie de ta boucle.

Maintenant si tu écris

Code :

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

1
2
3
4
5
6
7
8
 
function doSuppr(row) {
      return function() {
            suppression(row);
      };
}
...
bouton.onclick = doSuppr(ligne);

alors JS appelle doSuppr en passant comme paramètre la valeur de ligne (ici une référence à la ligne concerné); doSuppr renvoie donc une fonction qui inclut la référence à la ligne de la table concernée par ligne et non plus la variable ligne. Cela fait toute la différence.

ERE

**emmanuel.remy** · 08/10/2009, 00h52

Envoyé par alaska750

Mon nouveau Problème:
Maintenant que j'arrive à supprimer les lignes, je doit pouvoir récupérer le n° de ligne supprimée dans le but de mettre à jour une variable $SESSION. Le problème est qui dit var. SESSION dit coté serveur donc non accessible à javascript..(super

). !

Plutôt que de passer par un IFrame, utilise Ajax. Tu effectues une requête AJAX vers le server en passant comme paramètre le numéro de la ligne; tu modifies alors ta variable de session et tu peux renvoyer un flag indiquant le succès (ou l'échec) de l'opération. L'avantage est que c'est transparent et aussi que c'est ... fait pour cela !

ERE

suppression de ligne d'un tableau

JavaScript

Discussions similaires

Partager

Partager