Discussion :

[flet le kid]

Bonjour,

je vous souhaite à tous de très belles fêtes de fin d'année .

Pour en revenir au problème, je vous avoue que je ne connais rien à javascript et que ça fait quelques heures seulement que je m'y suis mis parce que je me suis rendu compte que j'en ai besoin pour créer automatiquement les champs sur ma page html.
Je créé automatiquement une nouvelle ligne dans ma page à l'aide du code suivant (que j'ai trouvé sur le net et adapté à mon cas):

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
 
function AddRow(ID){
    var newRow = document.getElementById(ID).insertRow(-1);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = '<td width="100" valign="middle"><input name="Tnbre" size="10" type="text"/></td>';
    newCell = newRow.insertCell(1);
    newCell.innerHTML = '<td width="80" valign="middle"><input name="Tnbre" size="7" type="text"/></td>';
    newCell = newRow.insertCell(2);
    newCell.innerHTML = '<td width="80" valign="middle"><input name="Tnbre" size="7" type="text"/></td>';
    newCell = newRow.insertCell(3);
    newCell.innerHTML = '<td width="80" valign="middle"><input name="Tnbre" size="7" type="text"/></td>';
    newCell = newRow.insertCell(4);
    newCell.innerHTML = '<td width="80" valign="middle"><input name="Tnbre" size="7" type="text"/></td>';
    newCell = newRow.insertCell(5);
    newCell.innerHTML = '<td width="80" valign="middle"><input name="Tnbre" size="7" type="text"/></td>';
    newCell = newRow.insertCell(6);
    newCell.innerHTML = '<td width="181" valign="middle"><input name="Tnbre" size="20" type="text"/></td>';
    newCell = newRow.insertCell(7);
    newCell.innerHTML = '<td width="50" valign="middle"><input type="button" onClick="AddRow(\''+ID+'\')" value="+"/> <input type="button" onClick="function() {RemoveRow(\''+ID+'\', '+newRow.rowIndex+')}" value="-" /></td>';
}

Là, tout se passe bien (je suis sous IE8).

Je veux pouvoir maintenant supprimer la ligne créée dynamiquement mais là je coince.
J'ai regardé les discussions suivantes:
http://www.developpez.net/forums/d33...ligne-tableau/
http://www.developpez.net/forums/d82...html-page-jsp/

Seulement, je n'arrive toujours pas à le faire. Pouvez vous m'aider?

Voici mon code de suppression:

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
 
function RemoveRow(ID, num){
  document.getElementById(ID).deleteRow(num);
 
  //Recomptage des lignes...
  var tableau = document.getElementById(ID);
  var trs = tableau.rows;
  var n = trs.length;
  var i;
 
  for (i=1; i<n; i++) //on commence à 1 et non à 0 ;)
  {
    trs[i].innerHTML = trs[i].rowIndex;
  }
 
}

J'avais pensez en cliquant sur le bouton déterminer l'index de la ligne courante puis la supprimer, mais je suis vraiment coincé.

Merci de m'aider et de privilégier des réponses assez détaillées et simple (car je suis débutant en javascript).

[vermine]

Bonjour,

Ecrivez plutôt ceci dans le bouton de suppression:

Code :

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

1
2
 
onClick="RemoveRow(\''+ID+'\', '+newRow.rowIndex+')"

Cependant, je constate une erreur Javascript lors du recomptage des lignes. Je n'ai pas encore compris ce qui bloquait, mais le résultat obtenu est erronés, il se trompe dans ses ID après la première suppression.

Cette instruction me parait étrange:

Code :

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

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

[flet le kid]

Cependant, je constate une erreur Javascript lors du recomptage des lignes. Je n'ai pas encore compris ce qui bloquait, mais le résultat obtenu est erronés, il se trompe dans ses ID après la première suppression.

Cette instruction me parait étrange:

Code :

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

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

[/QUOTE]


Bonsoir, dans le code que j'ai pris, la ligne trs[i].innerHTML = trs[i].rowIndex; est plutôt écrite trs[i].Cell[0].innerHTML = trs[i].rowIndex; ou quelque chose comme ça. Mais comme je n'ai pas cet élément, je l'ai zappé en essayant d'adapter au mieux mon code, mais je me suis bien trompé je pense.

[NutMotion]

Bonsoir flet,

J'ai trituré ton code (j'imaginais pas ca aussi galère!). Voici le code javascript auquel j'arrive

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
48
49
50
51
52
<SCRIPT language="javascript">

var cptRows=0; // compteur des lignes, qui servira pour l'identifiant unique de chaque ligne du tableau

function AddRow(ID){
    //récupération du tableau HTML
    var theTable=document.getElementById(ID);

    //création dynamique d'une nouvelle ligne de tableau
    var newRow =document.createElement("TR");

    var newCell;

    //on affecte un identifiant unique, composé du nom du tableau et du compteur de ligne
    newRow.id=ID+"_"+cptRows;

    cptRows++; //on incrémente, pour la prochaine ligne quon créera

    newCell= newRow.insertCell(0);

    newCell.innerHTML = '<td width="100" valign="middle"><input name="Tnbre" size="10" type="text"/>'+newRow.id+'</td>';
    newCell = newRow.insertCell(1);
    newCell.innerHTML = '<td width="80" valign="middle"><input name="Tnbre" size="7" type="text"/></td>';
    newCell = newRow.insertCell(2);
    newCell.innerHTML = '<td width="80" valign="middle"><input name="Tnbre" size="7" type="text"/></td>';
    newCell = newRow.insertCell(3);
    newCell.innerHTML = '<td width="80" valign="middle"><input name="Tnbre" size="7" type="text"/></td>';
    newCell = newRow.insertCell(4);
    newCell.innerHTML = '<td width="80" valign="middle"><input name="Tnbre" size="7" type="text"/></td>';
    newCell = newRow.insertCell(5);
    newCell.innerHTML = '<td width="80" valign="middle"><input name="Tnbre" size="7" type="text"/></td>';
    newCell = newRow.insertCell(6);
    newCell.innerHTML = '<td width="181" valign="middle"><input name="Tnbre" size="20" type="text"/></td>';
    newCell = newRow.insertCell(7);
    newCell.innerHTML = '<td width="50" valign="middle"><input type="button" onClick="AddRow(\''+ID+'\')" value="+"/>'
+'<input type="button" onClick="RemoveRow(\''+ID+'\',\''+newRow.id+'\')" value="-" /></td>';

    document.getElementById(ID).appendChild(newRow);

}

function RemoveRow(parentID, rowID) {
    //on récupère le tableau "parent"
    var parentNode=document.getElementById(parentID);

    //on supprime la ligne dont on a recu l'identifiant
    parentNode.removeChild(document.getElementById(rowID));

    //pour plus dinfos sur la méthode voir http://code.google.com/p/doctype/wiki/DocumentRemoveChildMethod
}

</SCRIPT>

Si tu veux tester, jai mis en pièce jointe la page complète (retire le passage en italique dans le code ci dessus, cest pour mettre en évidence l'identification de chaque ligne du tableau HTML.

Si ce code t'intéresse, je suis dispo pour des explications supplémentaires si nécessaires.