Liste en JQuery [Débutant(e)]

**Cvanhove** · 29/03/2016, 14h38

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 :

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
 
<!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>

**NoSmoking** · 29/03/2016, 15h21

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

**Cvanhove** · 29/03/2016, 15h35

MAJ :

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
 
<!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>