transfert d'option de select vers tr de table

Version imprimable

Voir 40 message(s) de cette discussion en une page

Je te fais un copier/coller de ton code, du moins ce que je vois :

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
 
<html>
<head>
<script type="text/javascript" src="JQScripts/jquery-1.4.3.min.js"></script>
<title>FLOAT</title>
<script type="text/javascript">
$(function(){ 
/*var opts= new Array()
$("#listeGauche options").each(function(){
   $("#listeGauche").data("opts",opts.push($(this)))
	})
	*/
$("#add").click(function(){
	$("#listeGauche option:selected").each( function(){$(this).remove();
	texte=$(this).text()
	valeur=$(this).val()
	$("#listeDroite").append("<tr><td>"+valeur+"=>"+texte+"</td></tr>")
	})
})
 
})
 
</script>
 
</script>
</head>
 
<body>
 
<div id="global">
 
 
 
		<div id="Gauche">
			<select multiple id="listeGauche">
 
						<option value="1">
							A
						</option>
 
						<option value="2">
							B
						</option>
 
						<option value="3">
							C
						</option>
 
						<option value="4">
							D
						</option>
 
						<option value="5">
							E
						</option>
 
			</select>
		</div>
 
 
 
		<div id="Droite">
 
			<table id="listeDroite" border="0" cellspacing="0">
 
			</table>
 
		</div>
 
 
 
		<div >	
			<input type="button" value="Add >>" id="add" />	
		</div>
 
	</div>
 
 
	</body>
</html>

22/04/2011, 16h29
SpaceFrog

heu j'ai pas le même pc que toi ...
monscript jquery n'est pas au même endroit :roll:

Code:

<script type="text/javascript" src="JQScripts/jquery-1.4.3.min.js"></script>

il est ou ton source jquery ?
22/04/2011, 17h33
n3x1n²

C'est ton code ça. C'était pour te dire qu'il n'y avait pas de fonction delete là-dedans.

Moi j'utilise

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" /></script>
24/04/2011, 08h51
SpaceFrog
:roll:

la c'est même plus un rendez vous chez l'ophtalmo qu'il se faut, c'est une meute de chiens d'aveugle ...
ligne 12 et 13 du code ...
Code:

1 2 $("#add").click(function(){ $("#listeGauche option:selected").each( function(){$(this).remove();

Pas besoin d'aller chez l'ophtalmo... Tu m'as pas compris c'est tout.

Il me semble que je l'ai dit plusieurs fois... Le problème c'était, je fais copier/coller de ce que j'ai dit :

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

Cette fonction devrait supprimer l'élément passé à droite. Tu vois mieux là ?

Mis à jour du mon .js :

Mon problème en ce moment c'est ma variable $id qui n'est pas "définie"

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
function initButton(){
		/*
		 * Role : disable button
		 */
 
		$('#add').attr('disabled','disabled');
	}
 
 
 
 
	function initList(){
		/*
		 * Role : initialize the list
		 */
 
		var $initValue='';
		$('#leftList').val('$initValue');
	}
 
 
 
 
	function activateButton(){
		/*
		 * Role : enable button
		 */
 
		$('#add').removeAttr('disabled');
	}
 
 
 
 
 
 
 
	function delPackage(){
 
		//get id for each <tr>
		$('tr').each(function(i){
			if($(this).attr('id')){
				var id = $(this).attr('id');
			}
		});
 
		//add to the left list
		$('#leftList').append('<option value="'+$idLeftItem+'">'+$textLeftItem+'</option>');
 
		//remove from the right list
		$('#rightList').remove('<tr id="'+$idLeftItem+'" style="text-align:center;"><th colspan="5" style="text-align:left; background:#eee;"><b>'+$textLeftItem+'</b></th><th colspan="2" style="text-align:right; background:#eee;"><input type="button" value="X" id="del"/></tr><tr height="10"><td></td></tr><tr><td><b>OS :</b></td><td>Win <input type="checkbox" id="checkWin" checked="checked"/></td><td>Lin <input type="checkbox" id="checkLin"/></td><td>Mac <input type="checkbox" id="checkMac"/></td><td>And <input type="checkbox" id="checkWin"/></td><td>iOS <input type="checkbox" id="checkIOS"/></td></tr><tr height="40"><td></td></tr>');
	}			
 
 
 
 
 
	function addPackage() {	
 
		//the selected item of leftList
		var $leftItem = $('#leftList option:selected');
 
		//id of the left item
		var $idLeftItem = $leftItem.val();
 
		//toString of the object left item
		var $textLeftItem = $leftItem.text();
 
 
 
		//if leftItem has an id
		if($leftItem.val()){
 
			//add on the right list..
			$('#rightList').append('<tr id="'+$idLeftItem+'" style="text-align:center;"><th colspan="5" style="text-align:left; background:#eee;"><b>'+$textLeftItem+'</b></th><th colspan="2" style="text-align:right; background:#eee;"><input type="button" value="X" id="del'+$idLeftItem+'"/></tr><tr height="10"><td></td></tr><tr><td><b>OS :</b></td><td>Win <input type="checkbox" id="checkWin" checked="checked"/></td><td>Lin <input type="checkbox" id="checkLin"/></td><td>Mac <input type="checkbox" id="checkMac"/></td><td>And <input type="checkbox" id="checkWin"/></td><td>iOS <input type="checkbox" id="checkIOS"/></td></tr><tr height="40"><td></td></tr>');
		}
 
		//remove the left item from left list 
		$leftItem.remove();
 
		initButton();
	}
 
 
 
 
 
 
 
	$(document).ready(function(){   
 
			initButton();
			initList();
 
 
			//when you click on the leftList
			$('#leftList').click(function(){
 
				activateButton();
 
					//click on the add button which adds a package
					$('#add').click(addPackage);
 
 
					//Disable the add button for each value change				 
					$('#leftList').change(function() {
						if($leftItem.length > 1 || $leftItem.length==0 ){
							initButton();
						}
					});				
			});//end #leftList.click
 
 
 
			//alert("avant");
 
			//click on the delete button which deletes a package from right list
			$('#del'+$id).click(delPackage);
 
			//alert("apres");
 
 
	});//end ready function

26/04/2011, 12h43
SpaceFrog

Citation:

Cette fonction devrait supprimer l'élément passé à droite.

Code:

$(this).remove();

OK OK bon, SI t'arrives à supprimer l'élément passé à droite, juste avec ton

Code:

$(this).remove();

dans la fonction delPackage, C'est que t'es un dieu, et non pas un humain.

je te donne le code :

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
 
 
//#################### Variables : ############################
 
//====>Add Package :
 
 
 
 
//=====>Del Package :	
 
var id = null;
 
//###############################################################
 
	function initButton(){
		/*
		 * Role : disable button
		 */
 
		$('#add').attr('disabled','disabled');
	}
 
 
 
 
	function initList(){
		/*
		 * Role : initialize the list
		 */
 
		//var $initValue='';
		$('#leftList').val('');
	}
 
 
 
 
	function activateButton(){
		/*
		 * Role : enable button
		 */
 
		$('#add').removeAttr('disabled');
	}
 
 
 
 
 
 
 
	function delPackage(){
 
		//get id for each <tr>
		$('tr').each(function(i){
			if($(this).attr('id')){
				var id = $(this).attr('id');
			}
		});
 
		//add to the left list
		$('#leftList').append('<option value="'+idLeftItem+'">'+textLeftItem+'</option>');
 
		//remove from the right list
		$('#rightList').remove(generate);
	}			
 
 
 
 
 
	function addPackage() {	
 
		//the selected item of leftList
		var $leftItem = $('#leftList option:selected');
 
		//id of the left item
		var idLeftItem = $leftItem.val();
 
		//toString of the object left item
		var textLeftItem = $leftItem.text();
 
 
		//generated code 
		var generate = '<tr id="'+idLeftItem+'" style="text-align:center;"><th colspan="5" style="text-align:left; background:#eee;"><b>'+textLeftItem+'</b></th><th colspan="2" style="text-align:right; background:#eee;"><input type="button" value="X" id="del'+idLeftItem+'"/></tr><tr height="10"><td></td></tr><tr><td><b>OS :</b></td><td>Win <input type="checkbox" id="checkWin" checked="checked"/></td><td>Lin <input type="checkbox" id="checkLin"/></td><td>Mac <input type="checkbox" id="checkMac"/></td><td>And <input type="checkbox" id="checkWin"/></td><td>iOS <input type="checkbox" id="checkIOS"/></td></tr><tr height="40"><td></td></tr>';
 
		//if leftItem has an id
		if(idLeftItem){
 
			//add on the right list..
			$('#rightList').append(generate);
		}
 
		//remove the left item from left list 
		$leftItem.remove();
 
		initButton();
	}
 
 
 
 
 
 
 
	$(document).ready(function(){   
 
			initButton();
			initList();
 
 
			//when you click on the leftList
			$('#leftList').click(function(){
 
				activateButton();
 
					//click on the add button which adds a package
					$('#add').click(addPackage);
 
 
					//Disable the add button for each value change				 
					$('#leftList').change(function() {
						var long=$('#leftList option:selected').length;
						if( long > 1 || long == 0 ){
							initButton();
						}
					});	
 
			});//end #leftList.click
 
 
 
 
			//click on the delete button which deletes a package from right list
			$('#del'+id).click(delPackage);
 
 
 
 
	});//end ready function

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
<!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="left">
			<select multiple id="leftList">
 
						<option value="1">
							A
						</option>
 
						<option value="2">
							B
						</option>
 
						<option value="3">
							C
						</option>
 
						<option value="4">
							D
						</option>
 
						<option value="5">
							E
						</option>
 
			</select>
		</div>
 
 
 
		<div id="right">
 
			<table id="rightList" border="0" cellspacing="0">
 
			</table>
 
		</div>
 
 
 
		<div id="middle">	
			<input type="button" id="add" value="Add >>" />	
		</div>
 
	</div>
 
 
 
</body>
</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
@CHARSET "ISO-8859-1";
 
#global{
	margin:auto;
	height:500px;
	width:580px;
/*	border:2px solid black;*/ 
}
 
 
#left{
	float:left;
	width:100px;
	height:400px;
/* 	border:2px solid red;  */
}
 
#left select{
	float:right;
}
 
 
#middle{
	margin:auto 405px auto auto;
	width:70px;
	height:30px;
/* 	border:2px solid blue; */
}
 
 
#right{
	float:right;
	width:400px;
	height:400px;
/* 	border:2px solid green; */
}
 
#ajout input{
	margin-left:-40px;
}

26/04/2011, 19h55
SpaceFrog

Tu demandes de déplacer une option vers un tableau ...
C'est ce que je fais pragmatiquement dans le code donné plus haut...
Après si tu veux te perdre en conjectures dans un code ténébreux ça te regarde.

Maintenant si ce n'est pas ça la question c'est que tu formules mal ton besoin ..
26/04/2011, 20h08
Bovino

Citation:

C'est que t'es un dieu, et non pas un humain.

My God !!! Spaffy !
Je savais bien que tu cachais quelque chose :)

@SpaceFrog :

J'ai fini mon script ! Enfin il reste encore des petits trucs mais bon je poste ici pour que tu vois ce que je voulais faire avec toutes ces histoires de remove() tout ça ;)

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
109
110
111
112
113
114
115
116
117
 
 
 
 
	function initButton(){
		/*
		 * Role : disable button
		 */
 
		$('#add').attr('disabled','disabled');
	}
 
 
 
 
	function initList(){
		/*
		 * Role : initialize the list
		 */
 
		//var $initValue='';
		$('#leftList').val('');
	}
 
 
 
 
	function activateButton(){
		/*
		 * Role : enable button
		 */
 
		$('#add').removeAttr('disabled');
	}
 
 
 
 
	function addPackage() {	
 
		//the selected item of leftList
		var $leftItem = $('#leftList option:selected');
 
		//id of the left item
		var idLeftItem = $leftItem.val();
 
		//toString of the object left item
		var textLeftItem = $leftItem.text();
 
 
		//generated code 
		var generateRight = '<div id="'+idLeftItem+'"><table><tr style="text-align:center;"><th colspan="5" style="text-align:left; background:#eee;"><b>'+textLeftItem+'</b></th><th colspan="2" style="text-align:right; background:#eee;"><input type="button" value="X" id="del'+idLeftItem+'"/></tr><tr height="10"><td></td></tr><tr><td><b>OS :</b></td><td>Win <input type="checkbox" id="checkWin" checked="checked"/></td><td>Lin <input type="checkbox" id="checkLin"/></td><td>Mac <input type="checkbox" id="checkMac"/></td><td>And <input type="checkbox" id="checkWin"/></td><td>iOS <input type="checkbox" id="checkIOS"/></td></tr><tr height="40"><td></td></tr></table></div>';
 
 
 
		//if leftItem has an id
		if(idLeftItem){
 
			//add on the right list..
			$('#rightList').append(generateRight);
		}
 
		//remove the left item from left list 
		$leftItem.remove();
 
		initButton();
 
 
		//Remove a right item 
		$('#del'+idLeftItem).bind("click", function(){
			//add to the left list
			var generateLeft = '<option value="'+idLeftItem+'">'+textLeftItem+'</option>' ;
 
			$('#leftList').append(generateLeft);
 
			//remove from the right list
			$('div#'+idLeftItem).remove();
 
		});
 
	} //end addPackage
 
 
 
 
 
 
 
 
 
 
	$(document).ready(function(){   
 
			initButton();
			initList();
 
 
			//when you click on the leftList
			$('#leftList').click(function(){
 
				activateButton();
 
 
					//click on the add button which adds a package
					$('#add').click(addPackage);
 
 
					//Disable the add button for each value change				 
					$('#leftList').change(function() {
						initButton();
					});	
 
			});//end #leftList.click
 
 
 
	});//end ready function

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
 
<!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="left">
			<select multiple id="leftList">
 
						<option value="1">
							A
						</option>
 
						<option value="2">
							B
						</option>
 
						<option value="3">
							C
						</option>
 
						<option value="4">
							D
						</option>
 
						<option value="5">
							E
						</option>
 
			</select>
		</div>
 
 
 
		<div id="right">
 
			<table id="rightList" border="0" cellspacing="0">
 
			</table>
 
		</div>
 
 
 
		<div id="middle">	
			<input type="button" id="add" value="Add >>" />	
		</div>
 
	</div>
 
 
 
</body>
</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
 
@CHARSET "ISO-8859-1";
 
#global{
	margin:auto;
	height:500px;
	width:580px;
/*	border:2px solid black;*/ 
}
 
 
#left{
	float:left;
	width:100px;
	height:400px;
/* 	border:2px solid red;  */
}
 
#left select{
	float:right;
}
 
 
#middle{
	margin:auto 405px auto auto;
	width:70px;
	height:30px;
/* 	border:2px solid blue; */
}
 
 
#right{
	float:right;
	width:400px;
	height:400px;
/* 	border:2px solid green; */
}
 
#ajout input{
	margin-left:-40px;
}

Voir 40 message(s) de cette discussion en une page