Modifier des cellules de tableau avec un sélecteur

**Jim_Nastiq** · 15/02/2012, 11h44

Bonjour à tous,

Je coince sur une problématique peu complexe (enfin je pense) sur le thème du tableau

Je souhaite proposer un tableau avec au bout de la derniere de ligne un bouton "Ajout" pour ajouter une ligne supplémentaire au tableau. Sur les autres lignes déjà existante je souhaite avoir un bouton de suppression de la ligne (cf. piece jointe).

Pour vous exposer mon problème voici un exemple simple. Tout d'abord mon code HTML:

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<TABLE id="myTable">
<TBODY>
<TR>
<TD>..</TD>
<TD>...</TD>
<TD><A style="DISPLAY: none" id="addBtn" href="#"><IMG title="Add" alt="Add" src="/Images/add.png"></A></TD>
</TR>
</TBODY>
</TABLE>

Puis le code JS:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
$("#addBtn").click(function () {
        // pour ajouter une ligne
        $('#myTable tbody>tr:last #addBtn').hide();
        $('#myTable tbody>tr:last').clone(true).insertAfter('#myTable tbody>tr:last');
        $('#myTable tbody>tr:last #addBtn').show();
 
        //pour modifier la dernière cellule de l'avant dernière ligne en delete
        var beforeLastTr = $('#myTable tbody>tr:last').prev().get(0);
        var oldHref = $('#myTable tbody>tr:last #addBtn').get(0);
});

Vous pouvez voir que je tente via 2 selecteur de récupérer la dernière cellule de l'avant dernière ligne et je les affecte à 2 variables.
Ma variable beforeLastTr contient la ligne entière du tableau (tr) et je ne sais pas comment manipuler cette variable pour récupérer ma dernière cellule.
Ma variable oldHref récupère le lien que je crée MAIS sur la dernière ligne et non sur l'avant dernière.

Bref, les solutions ne m'offre pas ce que je souhaite. Et je constate que ma problèmatique est plus général à JQuery. Je sais comment utiliser mon selecteur et comment utiliser les méthodes associés mais je n'arrive pas à jongler avec correctement ...
comment réutiliser un object (par exemple beforeLastTr ) pour le "requeter" via un selecteur Jquery ??

J'espère avoir été clair

Merci par avance

**Golgotha** · 15/02/2012, 12h38

Bonjour,

Je suis en train de voir ce que je peux te proposer...

Voici un début, je continue à travailler dessus :

Code :

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

1
2
3
4
5
6
				var arr = $('#myTable tbody>tr')
				$.each(arr, function(i,val) {
					if (i == arr.length-1)
						return
				        $(val).find("td:last").html("delete");
				});

Cela écrit simplement "delete" sur le dernier td de chaque ligne, sauf sur la dernière. Reste à mettre le liens pour vraiment supprimer la ligne...

**Jim_Nastiq** · 15/02/2012, 13h53

Merci pour ce premier jet

Je continue de fouiller de mon côté aussi

**Golgotha** · 15/02/2012, 14h49

Voila un code fonctionnel :

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
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function() {
       $("#addBtn").click(function () {
        // pour ajouter une ligne
				var lastId = 0
				lastId = $('#myTable tbody>tr:last').attr('id')
				$('#myTable tbody>tr:last #addBtn').hide();
				$('#myTable tbody>tr:last').clone(true).insertAfter('#myTable tbody>tr:last');
				$('#myTable tbody>tr:last #addBtn').show();
				$('#myTable tbody>tr:last').attr('id',parseInt(lastId)+1);
				var arr = $('#myTable tbody>tr')
				$.each(arr, function(i,val) {
					if (i == arr.length-1)
						return
						$(val).find("td:last").html('<a href="#" OnClick=\'$('+ '"#' +  parseInt($(val).attr('id')) + '"'  + ').remove();return false;\'>delete</a>');
				});
			});
		});
</script>     
</head>
 
<body>
 
<TABLE id="myTable">
<TBODY>
<TR id=1>
<TD>AAAAAAA</TD>
<TD>AAAAAAA</TD>
<TD><A id="addBtn" href="#">add</A></TD>
</TR>
</TBODY>
</TABLE>
 
</body>
</html>

A voir si ça peut être amélioré.

**Jim_Nastiq** · 15/02/2012, 15h39

Merci pour ton aide

Au final j'ai utilisé la méthode live() de jQuery et j'ai 2 handlers pour l'add et pour le delete ainsi pas besoin de gérer le click à la création de l'item dans la cellule

Modifier des cellules de tableau avec un sélecteur

jQuery

Discussions similaires

Partager

Partager