Suppression ligne tableau

Version imprimable

Bonjour ,

Un tableau se construit ligne par ligne .
Ensuite la suppression bloque ..

html :

Code:

1
2
3
4
5
<h3>Liste des clients</h3>
<table>
<th>Nom</th><th>Prénom</th><th>Téléphone</th>
</table>
<input type=button value="Insérer une ligne" id=insert />

Jq :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Ajout ligne tableau
$("#insert").bind ("click", function (){         
	var html ="";
	html += "<tr>";
	html += "<td><input type=text /></td>";
	html += "<td><input type=text /></td>";   
	html += "<td><input type=text /></td>";
	html += "<td><input type=button value=Supprimer id=remove /></td>";  
	html += "</tr>";     
	$("table").append (html);
	$("table").find("tr:last").find ("input[type=text]:first").focus();
});   
// Suppression ligne tableau
$("#remove").live ("click", function (){
	var $tr = $(this).parents ("tr");
	var id = $tr.attr ("id");
	$tr.remove ();
});

:mrgreen:

04/04/2014, 11h41
Bovino

Un identifiant doit être unique dans la page !
D'autre part, la fonction .live() est dépréciée et déconseillée. C'est .on() qu'il faut utiliser.
04/04/2014, 11h41
Jodu42

Salut,

Code:

html += "<td><input type=button value=Supprimer id=remove /></td>";

Mets des guillemets autour de la valeur de tes attributs.

Et n'oublie pas qu'un id est unique.

Edit : Je suis pas expert, mais une variable qui commence par $ ?
04/04/2014, 11h46
Bovino

Citation:

je ne pense pas qu'une variable puisse être nommée avec un $ devant

Bien sûr que si. ;)
C'est d'ailleurs parce que c'est possible que le raccourci de jQuery est $. :mrgreen:
D'autre part, c'est une notation que l'on rencontre souvent pour permettre de différencier les variables qui correspondent à un objet jQuery (ou qui référencent un élément HTML).

Citation:

Mets des guillemets autour de la valeur de tes attributs

C'est certes recommandé, mais pas obligatoire en HTML (en revanche, ça l'est en xhtml).
Bien entendu, si la valeur de l'attribut n'est pas alphanumérique, ça commence à poser problème.
04/04/2014, 11h50
Jodu42

Citation:

Envoyé par Bovino

Bien sûr que si. ;)
C'est d'ailleurs parce que c'est possible que le raccourci de jQuery est $. :mrgreen:
D'autre part, c'est une notation que l'on rencontre souvent pour permettre de différencier les variables qui correspondent à un objet jQuery (ou qui référencent un élément HTML).

Eh bien je ne savais pas, je n'ai jamais utilisé cette notation ! Comme quoi on en apprend tous les jours :P
Néanmoins pour le code présenté ici, je trouve que c'est un malus dans la visibilité...

Citation:

Envoyé par Bovino

C'est certes recommandé, mais pas obligatoire en HTML (en revanche, ça l'est en xhtml).
Bien entendu, si la valeur de l'attribut n'est pas alphanumérique, ça commence à poser problème.

J'ai rencontré suffisamment de problèmes avec les quotes/guillemets pour recommander leur usage autant que faire se peut.
Mais je plussoie totalement avec la notion théorique que tu donnes.
04/04/2014, 11h56
bm

ok - alors il faut indexer chaque bouton 'remove'

Comment réaliser cela ?
04/04/2014, 13h07
SpaceFrog

rien besoin d'indexer ...
il suffit de faire un remove relativement au bouton clické

http://jsfiddle.net/kf66j/

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Ajout ligne tableau
$("#insert").bind ("click", function (){         
	var html ="";
	html += "<tr>";
	html += "<td><input type=text /></td>";
	html += "<td><input type=text /></td>";   
	html += "<td><input type=text /></td>";
	html += "<td><input type=button value=Supprimer id=remove /></td>";  
	html += "</tr>";     
	$("table").append (html);
	$("table").find("tr:last").find ("input[type=text]:first").focus();
});
// Suppression ligne tableau
$("table").find("#remove").on ("click", function (){
$(this).closest('tr').remove();
});

find(#remove) ou find("button") , ne supprime rien dans cette fonction

04/04/2014, 15h53
SpaceFrog

Code:

html += "<td><input type=button value=Supprimer id=remove /></td>";

si tu fais cela plusieurs fois tu te retrouves avec plusieurs id identiques sur la page
Or un id DOIT ÊTRE UNIQUE sur ta page

Le fait de faire un remove relatif t'affranchit d'avoir à mettre un id sur le bouton
04/04/2014, 15h55
Bovino

Citation:

Envoyé par Bovino

Un identifiant doit être unique dans la page !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Ajout ligne tableau
$("#insert").bind ("click", function ()
{         
	var html ="";
	html += "<tr>";
	html += "<td><input type=text /></td>";
	html += "<td><input type=text /></td>";   
	html += "<td><input type=text /></td>";
	html += "<td><input type=button value=Supprimer /></td>";  
	html += "</tr>";     
	$("table").append (html);
	$("table").find("tr:last").find ("input[type=text]:first").focus();
});   
// Suppression ligne tableau
$("table").on ("click", function (){
$(this).empty('tr');
});

En enlevant id=remove , il n'y a que empty() , qui efface toute la table

==================================================================

Sur une table statique , les lignes s'effacent , sans problème ( et sans id ) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
<tbody><tr><th>Nom</th><th>Prénom</th><th>Téléphone</th>
</tr>
<tr><td>
	<input type="text"></td><td><input type="text"></td><td>
	<input type="text"></td><td><input type="button" value="Supprimer">
	</td></tr>
<tr><td>
	<input type="text"></td><td><input type="text"></td><td>
	<input type="text"></td><td><input type="button" value="Supprimer">
	</td></tr>
<tr><td>
	<input type="text"></td><td><input type="text"></td><td>
	<input type="text"></td><td><input type="button" value="Supprimer">
	</td></tr>
<tr><td>
	<input type="text"></td><td><input type="text"></td><td>
	<input type="text"></td><td><input type="button" value="Supprimer">
	</td></tr>
	</tbody>
</table>

Code:

1
2
3
$("tr").click( function(){
$(this).remove();
})

===============================================

C'est possible avec :

Code:

1
2
3
$("table").click( function(){
$("tr:last").remove();
})

Mais il faut saisir avec les flèches de déplacement et ne pas cliquer dans les inputs
pour ne pas effacer les "tr" .

[RESOLU ..]