transfert d'option de select vers tr de table

**n3x1n²** · 22/04/2011, 16h21

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

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

**SpaceFrog** · 22/04/2011, 16h29

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

il est ou ton source jquery ?

**n3x1n²** · 22/04/2011, 17h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" /></script>

**SpaceFrog** · 24/04/2011, 08h51

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**n3x1n²** · 26/04/2011, 11h17

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 :

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

**SpaceFrog** · 26/04/2011, 12h43

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).remove();

**n3x1n²** · 26/04/2011, 13h32

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).remove();

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

je te donne le code :

Code javascript :

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
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 HTML :

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

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
@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;
}

**SpaceFrog** · 26/04/2011, 19h55

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

**Bovino** · 26/04/2011, 20h08

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

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

**n3x1n²** · 27/04/2011, 12h23

@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 javascript :

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
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 html :

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

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
 
@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;
}

transfert d'option de select vers tr de table

JavaScript

Discussions similaires

Partager

Partager