Suppression d'une ligne d'un tableau

[Tobear91]

Bonjour à tous,

Je ne pratique pas le javascript, néanmoins j'essai quand même quelques petites bidouilles en attendant de m'y mettre vraiment

Voilà j'ai un simple tableau html et je veux lui ajouter et supprimer des lignes. J'arrive a ajouter des lignes sans problème, mais je bloque avec la fonction removeClass(). J'utilise jQuery. Autre petite informations il existe une ligne de base dans mon tableau.

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
<script>
	var nbligne = 1;
 
	function nouvelleligne(nbligne) {
		return '<tr class="ligne'+nbligne+'">'+
			'<td>'+nbligne+'</td>'+
			'<td><input type="text" name="nom[]" /></td>'+
			'<td><input type="text" name="prenom[]" /></td>'+
			'<td>'+
				'<select>'+
					'<option value="1">Adulte</option>'+
					'<option value="2">Enfant</option>'+
					'<option value="3">Bébé</option>'+
				'</select>'+
			'</td>'+
			'<td>'+
				'<select>'+
					'<option value="1">Vélo</option>'+
					'<option value="2">Cavalier</option>'+
					'<option value="3">Randonneur</option>'+
				'</select>'+
			'</td>'+
			'<td><a style="cursor: pointer" onclick="supprimerligne($(this));" id="deleteAfter"></a></td>'+
		'</tr>';
	}
 
	$("#insertAfter").click(function () {
		nbligne ++;
		$(nouvelleligne(nbligne)).insertBefore('.debut_table');
	});
 
	function supprimerligne(ligne) {
		$("tr").removeClass("ligne"+ligne);
	}
</script>

J'espère pouvoir trouver de l'aide ici

Merci et bon weekend prolongé à tous

[NoSmoking]

Bonjour,
la méthode removeClass() ne me parait pas adaptée à ce que tu souhaites faire, je verrais plutôt la méthode remove() après avoir récupéré le parent de TR

[Auteur]

bonjour,

regarde cette discussion :
http://www.developpez.net/forums/d33...u/#post2057900

[Tobear91]

Merci beaucoup pour les réponses, je me replonge dans mon problème après ce long weekend sans ordinateur

j'ai donc essayé ta solution Auteur, qui fonctionne à merveille. Néanmoins j'ai fais quelques petites modifications, et la ...

Je me retrouve avec le problème où mon bouton supprimer me supprime seulement la première ligne de mon tableau

Voici mon script :

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
<script type="text/javascript">
<!--
function ajoutLigne() {
	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 = nom;
	Cell = ligne.insertCell(1); 
	Cell.innerHTML = prenom;
	Cell = ligne.insertCell(2);	
	Cell.innerHTML = "<a style=\"cursor: pointer;\" id=\"#insertAfter\" onclick=\"suppression('"+ligne+"');\">Supprimer</a>";
 
	document.forms["formulaire"].nom.value = "";
	document.forms["formulaire"].prenom.value = "";
}
 
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;
 
	for (i=1; i<n; i++) { //on commence à 1 et non à 0 ;)
		trs[i].cells[0].innerHTML = trs[i].rowIndex;
	}
}
//-->
</script>

Et le formulaire :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form name="formulaire">
    <table name= "tableau" id="tableau" border="1">
        <tr>
            <td>Nom</td>
            <td>Prenom</td>
            <td>Supprimer</td>
        </tr>
        <tr>
            <td><input type="text" name="nom"></td>
            <td><input type="text" name="prenom"></td>
            <td><input type="button" value="Ajouter une ligne" onclick="ajoutLigne()" ></td>
        </tr> 
    </table>
</form>

D'avance merci, et bonne journée

[gwinyam]

Pas vraiment étonnant. Un coup de debugger (teste Firbug sous Firefox, Webkit Inspector sous Chrome/Safari et de façon générale F12 sur tous les navigateurs, IE et Opéra aussi) et tu te serais aperçu que ton argument ligne n'est pas bon. Tu lui passes un string, pas l'objet en lui même.

Essaie plutôt comme ça :

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
<script type="text/javascript">
<!--
function ajoutLigne() {
	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 = nom;
	Cell = ligne.insertCell(1); 
	Cell.innerHTML = prenom;
	Cell = ligne.insertCell(2);	
	Cell.innerHTML = "<a style=\"cursor: pointer;\" id=\"#insertAfter\" onclick=\"suppression('"+ligne.rowIndex+"');\">Supprimer</a>";
 
	document.forms["formulaire"].nom.value = "";
	document.forms["formulaire"].prenom.value = "";
}
 
function suppression(ligne) {
	document.getElementById('tableau').deleteRow(ligne);
 
	//Recomptage des lignes...
	var tableau = document.getElementById('tableau');
	var trs = tableau.rows;
	var n = trs.length;
 
	//Plus besoin de décalage
}
//-->
</script>

Même si je n'approuve pas cette méthode, au moins ça marche. Si j'ai compris ce que tu cherches à faire. Mieux vaut donner un id à ta cellule (ou juste la chaîne "Supprimer" si tu préfère) et ensuite rajouter un delegate à cet id qui réagit à l'évènement clicl.
Cela t'évitera de polluer ton code HTML avec du javascript inline.