Liste en JQuery

Version imprimable

Liste en JQuery

Bonjour,

pour m'apprendre le JQuery, on m'a demander de créer une liste de 4/5 pays et de créer une textbox et un bouton permettant d'ajouter un pays ou supprimer si celui ci est deja existant.
J'ai récupérer la construction d'une liste sur le net, et suivis un tuto pour essayer de comprendre les bases, mais je dois dire que ça reste encore flou pour moi. Ma liste ne s'affiche pas.
Pouvez-vous m'aidez à me mettre sur la voie?
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 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test JQuery</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script> var countries = ['United States', 'Canada', 'Argentina', 'Armenia']; var cList = $('ul.mylist') $.each(countries, function(i) { var li = $('<li/>') .addClass('ui-menu-item') .attr('role', 'menuitem') .appendTo(cList); var aaa = $('<a/>') .addClass('ui-all') .text(countries[i]) .appendTo(li); }); </script> </body> </html>

29/03/2016, 15h21
NoSmoking

Bonjour,
ne te manquerait-il pas un élément <ul class="mylist"></ul> dans ta page ?

MAJ :

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
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test JQuery</title>
	</head>
	<body>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
 
		<table id=maTable>
			<tbody>
				<tr>
					<td></td>
				</tr>
			</tbody>
		</table>
 
		<div id="erreur">
		    <p>Liste interactives en JQuery!</p>
		</div>
	    	<input type="text" name="name"/>
	    	<input type="button" name="Ajouter" value="Ajouter" onclick="addList()"/>
	    	<input type="button" name="Supprimer" value="Supprimer" onclick="deleteList()"/>
    </body>
    <script type="text/javascript">
        var obj = [
        		    {nom: 'Cedric'}, 
        			{nom: 'Gustavo'}, 
        			{nom: 'Alexandre'}, 
        			{nom: 'Mickael'}, 
        			{nom: 'Pepito'}
        		]; 
 
        function addList() {
        	$(function(){
        		$(#maTable > tbody:last).append(<tr><td></td></tr>);
       		})
        }
 
        function deleteList() {
 
        }
    </script>
	</body>
</html>

29/03/2016, 15h37
Cvanhove

Du coup, j'ai ma liste en paramétre, il me faut la charger, et implémenter la possibilité d'y ajouter un nom ou d'en supprimer un
29/03/2016, 15h53
Golgotha

Bonjour,

n'oublie pas les double quote dans ta commande : $("#maTable > tbody:last").append("<tr><td></td></tr>");
29/03/2016, 18h37
Invité

Avec AngularJs c'est plus facile
30/03/2016, 09h40
Cvanhove

Oui mais on m'a demandé de le faire en full JQuery pour apprendre...
30/03/2016, 11h07
Golgotha

Tu t'en sort Cvanhove ?

Je m'en sors plus où moins, j'ai encore une petite erreur qui dois me boucher la vue :oops:

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
 
<script type="text/javascript">
 
    	createList(obj);
 
    	var obj = [
       		    {nom: 'Cedric'},
       			{nom: 'Gustavo'},
       			{nom: 'Alexandre'},
       			{nom: 'Mickael'},
       			{nom: 'Pepito'}
       		];
 
    	$.("#idAjoutBouton").click(function(){
    		obj.push($("#name").val());
			$("#maTable").empty();
			createList();
		});
 
    	function createList(var obj){
			$.each(obj, function(key, value){
				$("#maTable").append("<tr><td>" + value.nom + "</td></tr>");
			})
		};
    </script>

ma fonction createList ne trouve pas l'objet obj. la fonction est bonne c'est certain mais ça bloque ailleurs, peut etre l'appel de mon objet qui n'est pas bon?

30/03/2016, 11h29
Golgotha

Tu veux utiliser une variable qui n'existe pas encore :)

Met la déclaration de ta variable obj avant l'appel createList

Effectivement ça fonctionne beaucoup mieux quand je fais pas des erreurs à la *** comme ça :roll:

J'ai modifié un petit peu ma liste pour rajouter un id, pour pouvoir simplifier la fonction suppression, seulement j'ai peur que mon remove ne fonctionne pas bien, une idée?

Ma liste :
Code:

1 2 3 4 5 6 7 8 var obj = [ {id: '1', nom: 'Cedric'}, {id: '2', nom: 'Gustavo'}, {id: '3', nom: 'Alexandre'}, {id: '4', nom: 'Mickael'}, {id: '5', nom: 'Pepito'} ];
ma fonction remove :
Code:

1 2 3 4 5 6 $("#idSuppBouton").click(function(){ $(obj).remove("#num"); $("#maTable").empty(); createList(obj); });
le #num correspond à une simple textbox où l'on insert l'id de la ligne a supp.

30/03/2016, 15h45
Golgotha

Cvanhove,

J'ai bricolé une interface : liste avec ajout et suppression avec jQuery.

J'ai mis de commentaire, j’espère que ça pourra t'inspirer. En tout cas te montrer les possibilités de jQuery.

https://jsfiddle.net/bfypa9td/

Je reste disponible si tu as des questions.