Déplacement entre tableaux

**magnum6669** · 29/01/2013, 10h45

Bonjour à tous,

Alors je cherche à faire des déplacements de <tr><td> entre deux tableaux. Tout ce passe bien jusqu'à que je reprenne l'élément que j'ai glissé dans l'autre tableau. En effet, il ne veux pas et me prend l'élément au dessus dans le tableau. Pour mieu expliquer :

Le premier double clique sert à prendre, et le second à déposer.

Je double clique(1) l'élément nommé "a" du tableau 1 et je double clique(2) dans le tableau 2 l'élément nommé "a" est déplacé dans le tableau 2.
Lorsque je double clique(1) à nouveau l'élément nommé "a" dans le tableau 2 et je double clique(2) dans le tableau 1 pour le remettre à sa place, c'est l'élément "d" qui bouge et non le "a".

mon code :

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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
 
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
		<title>liste1</title>
		<meta name="description" content="" />
		<meta name="author" content="stagiaire" />
 
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
 
	<script>
var text, value,test,tr,D;
		D=0
    	value=""
    	text=""
    	tr=""
    	test=1;
function recup(id) {
 
	//On récupère le text, et l'id de l'élément selectionné.
	var selectElmt = document.getElementById(id)
	text=document.getElementById(id).textContent 
	value=selectElmt.id	
}
 function del (id) {
 
 	 tr=document.getElementById(id).parentNode.id
	document.getElementById(tr).parentNode.removeChild(document.getElementById(tr));
}
    function depose(id){
 
		var a=text
		var b=value
		var c=tr		document.getElementById(id).parentNode.parentNode.innerHTML += '<tr id='+c+'><td id='+ b +'  ondblclick="choix('+id+');">'+a+'</td></tr>';															
	   }    
function choix(id){
 
	if(test==1 )
	{
		recup(id)
		del(id)
		test=0	
	}
	else
	{		
		depose(id)
		test=1
	}
}
 
	</script>
	</head>
 
	<body >
 
 
<table border="1" width="50" height="50" id="tb1"> 
 
	<tr id="tr1"> 
		<td id="1" ondblclick="choix(id)">
			1
		</td>
	</tr> 
	<tr id="tr2"> 
		<td id="2" ondblclick="choix(id)">
			2
		</td>
	</tr>
	<tr id="tr3"> 
		<td id="3" ondblclick="choix(id)">
			3
		</td>
	</tr>
</table>
 
   <br/>
   <br/>
 
<table border="1" width="50" height="50" id="tb2" > 
 
	<tr id="tr4"> 
		<td id="4" ondblclick="choix(id)">
			4
		</td>
	</tr> 
	<tr id="tr5"> 
		<td id="5" ondblclick="choix(id)">
			5
		</td>
	</tr
 
</table> 
 
 
	</body>
</html>

Comment corriger ça ?

Merci et bonne journée!

**r1oll** · 29/01/2013, 11h01

Il prend l'élèment sur lequel tu double clique pour déposer, ce qui est logique puisque tu récupere l'id de l'élèment sur lequel tu double clique a chaque fois... il manque un paquet de ";" aussi, dans le doute moi je les mets...

**magnum6669** · 29/01/2013, 11h11

Justement, j'ai fait la fonction choix qui sert d"aiguillage" pour que le deuxième double clique ne récupère pas d'id mais sert juste à déplacer ce qui à été gardé dans les variables.

**magnum6669** · 29/01/2013, 11h22

Tu avais partiellement raison ! Le soucis venait de la :

Code :

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

document.getElementById(id).parentNode.parentNode.innerHTML += '<tr id='+c+'><td id='+ b +'  ondblclick="choix('+id+');">'+a+'</td></tr>';

L'id qui est dans ondblclick="choix('+id+'); reprenait l'id de l'élément double-cliqué. Donc voila, cela fonctionne!

Merci à toi !

**r1oll** · 29/01/2013, 11h27

Derien, dépose ta solution, si sa peux en aider d'autre au passage

Bonne journée

**magnum6669** · 29/01/2013, 13h28

Voila le final

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
 
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
		<title>liste1</title>
		<meta name="description" content="" />
		<meta name="author" content="stagiaire" />
 
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
 
	<script>
 
 
 
 
 
var text, value,test,tr,D;
		D=0;
    	value="";
    	text="";
    	tr="";
    	test=1;
function recup(id) {
 
	//On récupère le texte, et l'id de l'élément double cliqué ainsi que le tr dans lequel il se situe.
 
	var selectElmt = document.getElementById(id);
	text=document.getElementById(id).textContent ;
	tr=document.getElementById(id).parentNode.id;
	value=selectElmt.id	;
 
}
 function del (id) {
 
 	//Cette fonction permet de supprimer le tr que l'on à double cliqué car les infos sont stockés dans les varaibles de "recup"
	document.getElementById(tr).parentNode.removeChild(document.getElementById(tr));
}
 
 
 
    function depose(id){
    	if(test==1)
    	{
 
    	}
    	else
    	{
//Cette fonction recrée le <tr><td> que l'on à récupérer la ou l'on double clique une seconde fois.
 
		var a=text;
		var b=value;
		var c=tr;
 
 
		document.getElementById(id).parentNode.parentNode.parentNode.innerHTML += '<tr id='+c+'><td id='+ b +'  ondblclick="choix('+b+');">'+a+'</td></tr>';
		id=""	
		value="";
    	text="";
    	tr="";	
			test=1;		
			}										
	   }    
function choix(id){
//Cette fonction fait office d’aiguillage pour faire les deux double clique différent
	if(test==1 )
	{
		recup(id);
		del(id);
		test=0	;
	}
	else
	{		
		depose(id);
 
		value="";
		text="";
		tr="";
	}
}
 
	</script>
	</head>
 
	<body >
 
 
<table border="1" width="50" height="50" id="tb1"> 
    <tr>
    	<td id="B1" ondblclick="depose(id)">
    		Base1
    	</td>
    </tr>
	<tr id="tr1"> 
		<td id="1" ondblclick="choix(id)">
			a
		</td>
	</tr> 
	<tr id="tr2"> 
		<td id="2" ondblclick="choix(id)">
			b
		</td>
	</tr>
	<tr id="tr3"> 
		<td id="3" ondblclick="choix(id)">
			c
		</td>
	</tr>
</table>
 
   <br/>
   <br/>
 
<table border="1" width="50" height="50" id="tb2" > 
 	<tr>
    	<td id="B2" ondblclick="depose(id)">
    		Base2
    	</td>
    </tr>
	<tr id="tr4"> 
		<td id="4" ondblclick="choix(id)">
			d
		</td>
	</tr> 
	<tr id="tr5"> 
		<td id="5" ondblclick="choix(id)">
			e
		</td>
	</tr
 
</table> 
 
 
	</body>
</html>

**magnum6669** · 29/01/2013, 13h40

Maintenant, j'ai un autre soucis, j'ai modifié ce code afin de remplacer le texte par des images. J'arrive à déplacer l'image 1 dans le tableau 2, mais une fois dans le tableau 2, l'image prend le lien de la seconde image déjà présente dans celui-ci. Je ne vois pas comment étant donné que :

Code :

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

document.getElementById(id).parentNode.parentNode.parentNode.innerHTML += '<tr id='+c+'><td id='+ b +'  ondblclick="choix('+b+');"><img width="20" height="20" src="'+a+'" name="img"/></td></tr>';

attribut justement le liens de l'image sur laquelle on clique.
Et que la variable "a" prend la valeur grâce à:

Code :

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

a=document.images.img.src ;

ce qui me donne : "http://127.0.0.1:8020/test7/image/dr.jpg"

**Golgotha** · 29/01/2013, 15h17

Bonjour,

J'ai essayé avec ce code là et je n'ai pas de problème :

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
 
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
		<title>liste1</title>
		<meta name="description" content="" />
		<meta name="author" content="stagiaire" />
 
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
 
	<script>
 
 
 
 
 
var text, value,test,tr,D;
		D=0;
    	value="";
    	text="";
    	tr="";
    	test=1;
function recup(id) {
 
	//On récupère le texte, et l'id de l'élément double cliqué ainsi que le tr dans lequel il se situe.
 
	var selectElmt = document.getElementById(id);
	text=document.getElementById(id).children[0].src ;
	tr=document.getElementById(id).parentNode.id;
	value=selectElmt.id	;
 
}
 function del (id) {
 
 	//Cette fonction permet de supprimer le tr que l'on à double cliqué car les infos sont stockés dans les varaibles de "recup"
	document.getElementById(tr).parentNode.removeChild(document.getElementById(tr));
}
 
 
 
    function depose(id){
    	if(test==1)
    	{
 
    	}
    	else
    	{
//Cette fonction recrée le <tr><td> que l'on à récupérer la ou l'on double clique une seconde fois.
 
		var a=text;
		var b=value;
		var c=tr;
 
 
		//document.getElementById(id).parentNode.parentNode.parentNode.innerHTML += '<tr id='+c+'><td id='+ b +'  ondblclick="choix('+b+');">'+a+'</td></tr>';
		document.getElementById(id).parentNode.parentNode.parentNode.innerHTML += '<tr id='+c+'><td id='+ b +'  ondblclick="choix('+b+');"><img  src="'+a+'" name="img"/></td></tr>';
 
		id=""	
		value="";
    	text="";
    	tr="";	
			test=1;		
			}										
	   }    
function choix(id){
//Cette fonction fait office d’aiguillage pour faire les deux double clique différent
	if(test==1 )
	{
		recup(id);
		del(id);
		test=0	;
	}
	else
	{		
		depose(id);
 
		value="";
		text="";
		tr="";
	}
}
 
	</script>
	</head>
 
	<body >
 
 
<table border="1" width="50" height="50" id="tb1"> 
    <tr>
    	<td id="B1" ondblclick="depose(id)">
    		Base1
    	</td>
    </tr>
	<tr id="tr1"> 
		<td id="1" ondblclick="choix(id)">
			<img src="http://icdn.pro/images/fr/n/a/navigateur-internet-explorer-microsoft-icone-8158-96.png">
		</td>
	</tr> 
	<tr id="tr2"> 
		<td id="2" ondblclick="choix(id)">
			<img src="http://icdn.pro/images/fr/n/a/navigateur-navigateur-netscape-icone-6387-96.png">
		</td>
	</tr>
	<tr id="tr3"> 
		<td id="3" ondblclick="choix(id)">
			<img src="http://icdn.pro/images/fr/n/a/navigateur-couleur-icone-5475-96.png">
		</td>
	</tr>
</table>
 
   <br/>
   <br/>
 
<table border="1" width="50" height="50" id="tb2" > 
 	<tr>
    	<td id="B2" ondblclick="depose(id)">
    		Base2
    	</td>
    </tr>
	<tr id="tr4"> 
		<td id="4" ondblclick="choix(id)">
			<img src="http://icdn.pro/images/fr/n/a/navigateur-chrome-google-icone-8608-96.png">
		</td>
	</tr> 
	<tr id="tr5"> 
		<td id="5" ondblclick="choix(id)">
			<img src="http://icdn.pro/images/fr/n/a/navigateur-opera-icone-7649-96.png">
		</td>
	</tr
 
</table> 
 
 
	</body>
</html>

**magnum6669** · 29/01/2013, 15h27

Bonjour,
Et bien c'est juste ce qu'il me fallait, donc tu as remplacé :

Code :

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

text=document.images.nom.src ;

Par :

Code :

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

text=document.getElementById(id).children[0].src ;

?
En tout cas, je te remercie infiniment.

Déplacement entre tableaux

JavaScript

Discussions similaires

Partager

Partager