Supprimer dynamiquement des lignes d'un tableau
Bonjour,
je vous souhaite à tous de très belles fêtes de fin d'année :ccool:.
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:
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:
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).
Noyez Joël, qu'ils disaient
Bonjour,
Ecrivez plutôt ceci dans le bouton de suppression:
Code:
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:
1
2
3
4
5
|
for (i=1; i<n; i++) //on commence à 1 et non à 0 ;)
{
trs[i].innerHTML = trs[i].rowIndex;
} |
