Bonjour à tous,

En grand débutant en JQuery que je suis, il y a des comportements que je ne comprend pas du tout.

Voilà l'idée derrière ce bout de code :

Faire un beau tableau (avec le plugin dataTable de JQuery).
On pourra ajouter et supprimer des lignes de ce tableau avec deux images (+ et -)

Cela fonctionne sans le plugin dataTable, mais pas avec. cf le code



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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!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>
<SCRIPT type="text/javascript" src="js/jquery.dataTables.js"></SCRIPT>
 
 
 
</head>
<body>
 
<table id="monTab">
<thead>
	<tr>
 
		<th>test</th>	
		<th>test</th>
 
		<th>
			<a href="#" id="addButtonAction">
				<img src="img/add.gif" alt="ca marche pas" />
			</a>
		</th>
	</tr>
</thead>
 
<tbody>
 
</tbody>
 
</table>
 
<a href="#" id="submitButton">Envoyer</a>
 
 
<script type="text/javascript">
 
 
 
$(document).ready(function() 
{
        //fonctionne sans ceci : 
	//$('#monTab').dataTable();
 
    $("a#addButtonAction").click(function() 
                    {
 
			$("table#monTab tbody").append('<tr id="indice">'
				+'<td>dddd</td>'
				+'<td>ddd</td>'
				+' <td> <a href="#" name="removeButton" ><img src="img/remove.jpeg" alt="" /></a> '
				+' <input type="hidden" name="dataToSend" value="critere:valeur"/>  </td> '
				+'</tr>');
 
	    //$('#monTab').dataTable();
 
                    }
                );
 
    		$("table#monTab").on('click', '[name="removeButton"]', function() 
    			{
    				//on supprime la ligne courante
    				$(this).parent().parent().remove()
			}
		);
 
 
		$("a#submitButton").click(function() 
                    {
			var toSend ;
			$('[name="dataToSend"]').each(function(index) {
					toSend += $(this).val()+" ; ";
			});
 
			alert(toSend);
 
                    }
                );
 
 
});     
</script>
 
</body>
</html>

Avez vous des idées ?