tableau, ajout/sup de ligne

**pigpen** · 05/07/2012, 09h17

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

**Macmillenium** · 05/07/2012, 14h03

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**pigpen** · 08/07/2012, 17h34

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Macmillenium** · 08/07/2012, 18h27

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ou (si t'es en jQuery 1.7)

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ou (obsolète)

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**pigpen** · 08/07/2012, 18h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Macmillenium** · 08/07/2012, 20h11

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.

tableau, ajout/sup de ligne

jQuery

Vue hybride

Discussions similaires

Partager

Partager