Modifier des cellules de tableau avec un sélecteur

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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

Merci par avance

15/02/2012, 12h38
Golgotha
Bonjour,

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

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

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...
15/02/2012, 13h53
Jim_Nastiq

Merci pour ce premier jet :)

Je continue de fouiller de mon côté aussi ;)

Voila un code fonctionnel :

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
<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é. :ccool:

15/02/2012, 15h39
Jim_Nastiq

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