transfert d'option de select vers tr de table
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:
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:
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:
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 !
