transfert d'option de select vers tr de table

**n3x1n²** · 22/04/2011, 14h42

Bonjour,

je vous explique le contexte brièvement :

J'ai une liste d'élément à gauche, au milieu un bouton et à droite les élément du gauche ajoutés. Les éléments passés à droite ont un bouton pour les "supprimer" et ceux sont supprimés repasse à gauche. J'espère que c'est clair. Si vous avez des questions, posez-les.

Je l'ai mis en place avec du jQuery. je suis débutant, j'essaye de me débrouiller seul avec des recherches sur le net mais là j'ai vraiment besoin d'aide.

J'ai codé un peu pour vous faire voir ce que j'ai dans la tête. Voici tout le code :

HTML :

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>CopyList</title>
<link href="mystyle.css" type="text/css" rel="stylesheet" media="screen"/>
 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" /></script>
 
<script type="text/javascript" src="js.js"></script>
 
 
</head>
<body>
 
	<div id="global">
 
 
 
		<div id="Gauche">
			<select multiple id="listeGauche">
 
						<option id="eltGauche" value="1">
							A
						</option>
 
						<option id="eltGauche" value="2">
							B
						</option>
 
						<option id="eltGauche" value="3">
							C
						</option>
 
						<option id="eltGauche" value="4">
							D
						</option>
 
						<option id="eltGauche" value="5">
							E
						</option>
 
			</select>
		</div>
 
 
 
		<div id="Droite">
 
			<table id="listeDroite" border="0" cellspacing="0">
 
			</table>
 
		</div>
 
 
 
		<div id="add">	
			<input type="button" value="Add >>" id="add" />	
		</div>
 
	</div>
 
 
 
</body>
</html>

JS :

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
 
	function initButton(){
		/*
		 * Role : disable button
		 */
 
		$('#add input').attr('disabled','disabled');
	}
 
	function initListe(){
		/*
		 * Role : initialize the list
		 */
 
		var $valeur='';
		$('#listeGauche').val('$valeur');
	}
 
	function activeButton(){
		/*
		 * Role : enable button
		 */
 
		$('#add input').removeAttr('disabled');
	}
 
 
	$(function(){     
 
		initButton();
		initListe();
 
 
 
 
		$('#listeGauche').click(function(){
 
			activeButton();
 
				//au moment du click sur le bouton ayant l'id "add"
				$('#add').click(function() {
 
 
					//Je stocke le texte de la balise option séléctionné (l'élément séléctionné) 
					//(!! option:selected ne fonctionne que pour les balises <select> !!)
					var $elementDeListeGauche = $('#listeGauche option:selected');
 
 
					/*avec la methode append, je rajoute à ma table ayant l'id "listeDroite".
					 *les éléments ajoutés sont dans <td> et leurs id sont passé dans <tr id="idElementPassé">.
					 * 
					 *la methode text(), on peut dire que c'est l'équivalent de la methode "toString()" en Java.
					 *elle permet de transformer en chaîne de caractère l'objet $maVariable.
					 */
 
					if($elementDeListeGauche.val()>=0){
						$('#listeDroite').append('<tr id="'+$elementDeListeGauche.val()+'" style="text-align:center;"><th colspan="5" style="text-align:left; background:#eee;"><b>'+$elementDeListeGauche.text()+'</b></th></tr>');
					}
					//et enfin je supprime l'élément ajouté de la liste gauche 
					$elementDeListeGauche.remove();
 
					initButton();
 
				});//fin click sur add
 
 
 
				/*
				 * Lorsqu’un élément est passé à droite, 
				 * « la valeur » de la liste gauche est renouvelée et 
				 * c’est ce renouvellement qui déclenche cet événement.
				 * Donc à chaque renouvellement de la valeur de la liste gauche, 
				 * on appelle la fontion initButton().
				 */
				$('#listeGauche').change(function() {
					initButton();
				});
 
		});//fin click sur select
 
 
 
 
		$('#del input').click(function(){
 
			var $id = $('$elementDeListeGauche.val()');
			var $tr = $('#'+$id);
 
			//rajout du l'elt à gauche
			//$('#listeGauche').append('<option value="'+$id+'">'+$elementDeListeGauche.text()+'</option>');
 
			//enlèvement de l'elt de droite
			$tr.remove();
 
		}); // fin delete
 
 
 
 
 
		$('#listeDroite').change(function() {
			initButton();
		});
 
 
 
	});// fin jQuery

Css :

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
 
@CHARSET "ISO-8859-1";
 
#global{
	margin:auto;
	height:500px;
	width:580px;
/* 	border:2px solid black; */
}
 
 
#Gauche{
	float:left;
	width:100px;
	height:400px;
/*  	border:2px solid red;  */
}
 
 
#add{
	margin:auto 410px auto auto;
	width:70px;
	height:30px;
/*  	border:2px solid blue;  */
}
 
 
#Droite{
	float:right;
	width:400px;
	height:400px;
/* 	border:2px solid green;*/
}
 
#add input{
	margin-left:-40px;
}

Merci d'avance !

**SpaceFrog** · 22/04/2011, 14h45

liste = quelle type de balise ?
ce sont des options de select ...

sinon poru le passage d'element il y a déja des réponses sur le forum ou dans les contributions
en gros il suffit d'appender l'element ailleurs il se deplace sans avoir a en créer un nouveau et supprimer l'ancien

**n3x1n²** · 22/04/2011, 14h59

Envoyé par SpaceFrog

liste = quelle type de balise ?
ce sont des options de select ...

sinon poru le passage d'element il y a déja des réponses sur le forum ou dans les contributions
en gros il suffit d'appender l'element ailleurs il se deplace sans avoir a en créer un nouveau et supprimer l'ancien

Oui alors, à gauche ma liste c'est des option de select, à droite c'est un tableau. D'où dans mon code js, je "génère" des <tr></tr>.

Sinon petite précision :
L'id des <tr> à droite sont des variables car ils viennent de la base données.
C'est pour ça que je fais une concaténation dans la fonction delete.

Ma question... Bah ma fonction delete marche pas.
Je fais un petit alert("coucou"); et j'ai remarqué que je rentre même pas dans la fonction...

Il faut que ce soit fini absolument aujourd'hui... je suis en stage là donc j'ai pas trop le droit de passer 3 jours pour un problème...

**n3x1n²** · 22/04/2011, 15h03

Je pense que le titre "basculement d'éléments de liste" n'est pas trop approprié pour le sujet

**SpaceFrog** · 22/04/2011, 15h05

Ben toujours mieux que ce qu'il y avait avant ...

on parle bien de transfert d'elements options depuis un select vers un table ...

**n3x1n²** · 22/04/2011, 15h16

Non non mais je critique pas dans le sens négatif. Je suis un peu stressé. Bref c'est pas ça qui est important.

"on parle bien de transfert d'elements options depuis un select vers un table ... "

En fait, c'est plutôt: transfert d'élément sous forme <option> depuis une table.
Regardez et essayez mon code, ça aidera beaucoup pour comprendre.

Regardez surtout ma fonction delete, c'est elle qui me pose un problème
$('#del input').click(function(){ ... }

**Bovino** · 22/04/2011, 14h45

Si vous avez des questions, posez-les.

Commençons par le début. C'est quoi ta question ?

transfert d'option de select vers tr de table

JavaScript

Vue hybride

Discussions similaires

Partager

Partager