suppression groupe de ligne dans formulaire dynamique

Version imprimable

Bonjour,

j'ai créé un formulaire dynamique ou je peux ajouter des lignes et les supprimer dynamiquement.

cependant, j'ai une catégorie que je vais appeler 'locuteurs' qui regroupe environ une dizaine de ligne.
je peux ajouter come je le souhaite ces locuteurs et donc j'ai un ajout de plusieurs lignes à chaque fois.

je voudrai pouvoir supprimer ces groupes de lignes simultanément avec javascript.

voici un bout de mon formulaire

form.php

Code:

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
 
<tbody id="loc">
				<tr>
					<td align="center"><b><i>Informations sur les locuteurs</i></b></td>
					<td bgcolor="#006699"></td>
				</tr>
				<tr>
					<td><b><i>Locuteur 1</i></b></td>
					<td bgcolor="#006699"></td>
 
				</tr>
				<tr>
					<td>Identifiant :</td>
					<td><input type="text" size="50" name="id[]"
						onKeyUp="javascript:couleur(this);"></td>
 
				</tr>
				<tr>
					<td>Locuteur principal :</td>
					<td><input type="checkbox" name="Loc_principal[]" value="Oui" />Oui <input
						type="checkbox" name="Loc_principal[]" value="Non" />Non</td>
 
				</tr>
 
				<tr>
					<td>Age :</td>
					<td><input type="text" size="50" name="age[]"
						onKeyUp="javascript:couleur(this);" onblur="verifAge(this)"></td>
 
				</tr>
</tbody>
<tr>
				<td><input value="Ajouter un locuteur" id="idBouton" type="button"
					onclick="AddRow();" /></td>
			</tr>

le js qui permet d'ajouter des locuteurs

Code:

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
var num = 1;
//// AJOUT LOCUTEUR
function AddRow() {
	num++;
	var newRow = document.getElementById('loc').insertRow(-1);
	var newCell = newRow.insertCell(0);
	newCell.innerHTML = '<b><i>' + 'Locuteur' + num + '</i></b>';
	newCell = newRow.insertCell(1);
	newCell.innerHTML = '';
 
	var newRow1 = document.getElementById('loc').insertRow(-1);
	var newCell1 = newRow1.insertCell(0);
	newCell1.innerHTML = 'Identifiant : ';
	newCell1 = newRow1.insertCell(1);
	newCell1.innerHTML = '<input type="text" size="50" name="id[]" onKeyUp="javascript:couleur(this);">';
 
	var newRow2 = document.getElementById('loc').insertRow(-1);
	var newCell2 = newRow2.insertCell(0);
	newCell2.innerHTML = 'Locuteur principal : ';
	newCell2 = newRow2.insertCell(1);
	newCell2.innerHTML = '<input type="checkbox" name="Loc_principal[]" value="Oui" />Oui <input type="checkbox" name="Loc_principal[]" value="Non" />Non';
 
	var newRow3 = document.getElementById('loc').insertRow(-1);
	var newCell3 = newRow3.insertCell(0);
	newCell3.innerHTML = 'Age : ';
	newCell3 = newRow3.insertCell(1);
	newCell3.innerHTML = '<input type="text" size="50" name="age[]" onKeyUp="javascript:couleur(this);" onblur="verifAge(this)">';
 
}

voici un script javascript qui ne permet de supprimer qu'une ligne pour le moment et sur lequel j'aimerai me baser

Code:

1
2
3
4
5
6
7
8
9
10
 
function suppression(ligneLocuteur) {
 
 
	var nb = document.getElementById('loc').rows.length;
	 document.getElementById('loc').deleteRow(-1);
 
 
 
}

cette fonction n'est bien entendue pas adapté et je voudrai des idées pour le faire le plus économiquement possible si c'est permi.

merci a vous.

03/07/2009, 12h35
E.Bzz

Bonjour,

Citation:

Envoyé par knebhi

cette fonction n'est bien entendue pas adapté et je voudrai des idées pour le faire le plus économiquement possible si c'est permi.

Je comprends pas bien ton problème :koi:

Tu l'as fait fonctionner pour une ligne => il te suffit de l'appeler 10 fois pour supprimer 10 lignes, non ?

A+
03/07/2009, 12h41
andry.aime

Salut,

Citation:

newCell1.innerHTML = '<input type="text" size="50" name="id[]" onKeyUp="javascript:couleur(this);">';

Créer un élement avec innerHTML est à bannir --> :faq:
http://javascript.developpez.com/faq...DOM#DOMajouter

Citation:

suppression(ligneLocuteur)

La paramètre ligneLocuteur n'est pas utilisé dans la fonction.
Tu peux supprimer ces lignes en récupérant ces id ou name et faire une boucle .

merci a tous

alors en fait j'ai créer un bouton supprimer qui pointe vers la fonction supprimerLocuteur
Code:

1 2 3 4 5 6 7 8 //creation bouton supprimer var bouton = document.createElement("input"); bouton.type = "button"; bouton.value = "Supprimer"; bouton.onclick = function() { suppressionLocuteur() }; newCell.appendChild(bouton);
ensuite j'ai fait une boucle for dans le supprimer qui m'indique le nombre de ligne que je veux supprimer d'un coup
Code:

1 2 3 4 5 6 7 8 function suppressionLocuteur() { num--; var nb = document.getElementById('loc').rows.length; for(i=0;i<17;i++){ document.getElementById('loc').deleteRow(-1); }
à notre que j'ai décrémenter le nombre de locuteur dans la fonction suppression afin de supprimer et de rajouter eventuellement la ligne correcte.