tableau, ajout/sup de ligne

Version imprimable

05/07/2012, 09h17
pigpen

tableau, ajout/sup de ligne

Bonjour à tous,

Je suis un grand débutant du JQuery et j'avoue ne pas vraiment m'en sortir pour le moment.

Après une petite visite de la FAQ et quelques questions à google, je ne parviens pas à trouver ce que je souhaite.

Mon problème est relativement simple :

J'ai un tableau html, ce qu'il y a de plus classique. et je souhaite avoir un bouton pour ajouter une ligne et un bouton (sur chaque ligne) qui permet de supprimer la dite ligne.

C'est sans doute raz de moquette comme niveau mais ... je ne trouve aucune solution

Avez vous une idée sur la question ?

Merci d'avance

Pour ajouter/supprimer des lignes de tableau, tu peux utiliser les méthodes append()/remove()

Code:

1
2
3
4
5
6
7
8
9
 
<button class="add">ajouter</button>
<table>
    <tr>
        <td><button class="remove">supprimer</button></td>       
        <td>bla</td>  
        <td>bla</td>
    </tr>
</table>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
$('.add').on('click', function() {    
    $('table').append( 
        [
            '<tr>',  
                '<td><button class="remove">supprimer</button></td>', 
                '<td>bla</td>',  
                '<td>bla</td>', 
            '</tr>'  
        ].join('') //un seul append pour limiter les manipulations directes du DOM
    );  
});
 
$('table').on('click', '.remove', function() {
   var $this = $(this);
 
   $this.closest('tr').remove();   
});

Maintenant reste à savoir comment et sous quel format tu comptes gérer les data des cellules.

Bonjour,

Merci pour ta réponse, cela m'aide pas mal.
J'ai de mon coté tenté de "bricoler" un peu

voilà ce que ça donne :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="1138.47">
 
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
 
</head>
<body>
 
<table id="monTab">
<tr>
 
<td>test</td>
 
<td>test</td>
 
<td>
	<a href="#" id="addButtonAction">
		<img src="img/add.gif" alt="ca marche pas" />
	</a>
</td>
</tr>
</table>
 
<a href="">Link Text</a>
 
 
<script type="text/javascript">
$(document).ready(function() 
{
 
	var indice = 0 ;
 
    $("a#addButtonAction").click(function() 
                    {
						$("table#monTab").append('<tr id="indice">'
													+'<td>dddd</td>'
													+'<td>ddd</td>'
													+' <td> <a href="#" name="removeButton" ><img src="img/remove.jpeg" alt="" /></a><td> '
												+'</tr>');
                    }
                );
 
	$('[name="removeButton"]').click(function() 
                {
					alert("delete");
                }
            );
 
});     
</script>
 
</body>
</html>

Mon problème : impossible de faire afficher mon alert delete
Je pense que c'est le sélecteur qui ne fonctionne pas mais je ne vois pas pourquoi.

merci d'avance pour votre aide.

Code:

1
2
3
4
5
6
 
	$("table#monTab").delegate('[name="removeButton"]', 'click', function() 
	                {
					alert("delete");
	                }
	            );

Ou (si t'es en jQuery 1.7)

Code:

1
2
3
4
5
6
 
	$("table#monTab").on('click', '[name="removeButton"]', function() 
	                {
					alert("delete");
	                }
	            );

Ou (obsolète)

Code:

1
2
3
4
5
6
 
	$('[name="removeButton"]').live('click', function() 
                {
					alert("delete");
                }
            );

08/07/2012, 18h59
pigpen
Bonsoir,

Une nouvelle fois, merci de ton aide.
Cependant pourrais tu m'expliquer rapidement pourquoi ma version ne fonctionne pas ?

pour info je suis en JQuery 1.5.1. Je vais donc utiliser :
Code:

1 2 3 4 5 $('[name="removeButton"]').live('click', function() { alert("delete"); } );
Pourquoi ne puis-je pas utiliser la "méthode" click() comme j'ai fait sur le bouton ajouter ?

Merci d'avance
08/07/2012, 20h11
Macmillenium

Les éléments crées dynamiquement dans le DOM (removeButton dans ton cas) n'ont pas accès aux gestionnaires d'événements jQuery.
La méthode live() permet de lier un gestionnaire d'événement à ces éléments dynamiques.
18/07/2012, 11h15
pigpen

Hooo ceci explique cela.
Merci de ton explication.