Discussion :

[tiyo76]

Bonjour à tous,

Je dois en ce moment développer un système de bouton "monter/descendre".
Avant que tout le monde s'exclame " " !!! Sachez que j'ai réussi à faire l'action mais que je rencontre un problème sur le "onclick".

J'ai un tableau de la forme suivante :

|| colonne 1 || colonne 2 ||
|| libelle1 || delete ||
|| libelle2 || delete ||
|| libelle3 || delete ||
|| libelle4 || delete ||

Le "delete" correspond à une action qui supprime la ligne et qui va faire d'autres actions sur d'autres pages.

Et à côté de ce tableau, j'ai un tableau de boutons fleches qui permet de déplacer les TR de haut en bas.
Mon problème : j'arrive à déplacer les éléments, j'arrive à remettre le bon onclick pour les libelles (onclick = surligner la ligne en bleu) mais je n'arrive pas à bien remettre le onclick des delete, quand je déplace un TR le bouton delete ne fonctionne plus.

Voici ma fonction :

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
 
/****************************************************************************
* FONCTION    : executerFleche
* DESCRIPTION : Fonction qui trie le tableau de sélection depuis les boutons fleche
* RETOUR      : aucun
* PARAMs      : action de type String (monter/descendre)
* DER MODIF   : 30/08/2013
*****************************************************************************/
function executerFleche(action,etab,libJs,token)
{
	var table = document.getElementById('selections#tableau');
	var tbody = table.tBodies[0]; //je récupère ma balise <tbody> contenant les <tr> à déplacer 
	var found = false;
    var child;
 
    // permet de trouver le <tr> sélectionné et de mettre sa valeur dans la variable child
    for(var i=0;i<tbody.childNodes.length && !found;i++)
	{
		child=tbody.childNodes[i];
 
		if  (child.nodeType==1 && child.tagName.toLowerCase()=='tr')
			for (j=0;j<child.childNodes.length;j++)
				if  (child.childNodes[j].className=='IHMDataSelected')
				{
					found=true;
					break;
				}
	}
 
    // Si aucun TR n'est sélectionné
    if ( !found )
	{
    	alert("Veuillez sélectionner un élément dans le tableau de sélection.")
	}
 
    else
    {
	    // selon la fleche cliquée, les actions sont differentes
	    switch (action)
	    {
	    	case 'doubleMonter':
	    		while ( child.rowIndex > 2 )
	            {
	    			// on récupère les TD du TR sélectionné
	        	    var myTds = child.getElementsByTagName("td");
	        	    myTds[0].value = myTds[0].value + 1; 
 
	        	   	var previousRow = table.rows[child.rowIndex - 1]; 
 
	        	   	var myInputsPrevious = previousRow.getElementsByTagName("td"); 
	        	   	myInputsPrevious[0].value = myInputsPrevious[0].value - 1; 
 
	        	   	// On met dans une variable temporaire le contenu du TR sélectionné
	        	   	var tmp = child.innerHTML;
	        	   	table.rows[child.rowIndex].innerHTML = previousRow.innerHTML;
	        	   	table.rows[child.rowIndex - 1].innerHTML = tmp;
 
	        	   	// On remet le onclick sur le TD du libelle
	        	   	child.childNodes[0].onclick = function() { selectOnClick(this); };
 
	        	   	// On change le child avec la nouvelle valeur du TR sélectionné
	        	   	child = table.rows[child.rowIndex - 1];
 
	        	    // On remet également le onclick sur le deuxième TR qui a bougé
	        	   	child.childNodes[0].onclick = function() { selectOnClick(this); };
	            }
	    		break;
 
// .......
 
         }
}

Si j'ai été clair, mon gros problème est que quand je bouge un TR, le onclick se supprime automatiquement et je suis obligé de le remettre. Pour la sélection de ligne, j'arrive à le remettre mais pour le bouton delete je n'y arrive pas...

Je tiens à préciser que je suis débutant en JS et donc que mon code n'est pas forcément très "joli" !

Si vous pouviez m'aider à trouver une solution je vous en serait reconnaissant ! J'avais pensé à bouger seulement le TD du libellé et de ne pas toucher aux TD "delete" lors du déplacement mais je n'ai pas trouvé comment faire

Merci d'avance !

[NoSmoking]

Bonjour,
pas regarder de trop près mais pourquoi ne pas passer par un clonage profond de l'élément à déplacer avant insertion au bon endroit du clone et suppression de l'élément.

Tu peux également utiliser la méthode insertBefore.

[tiyo76]

Bonjour,

J'ai essayé avec ce que tu m'as proposé :

Code :

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

1
2
3
4
5
6
7
8
 
// clone le tr sélectionné dans une variable temporaire
var tmp = child.cloneNode(true);
 
table.deleteRow(child.rowIndex);
 
// on insère le clone avant le tr précédent
tbody.insertBefore(tmp,childAvant);

J'arrive bien à échanger les deux places mais je rencontre toujours le même problème : le TR qui est créé à partir du insertBefore n'a pas les propriétés onclick de celui de base

[SpaceFrog]

Pourquoi cloner detruire et réinserer...

il suffit d'appender le noeud ailleurs ...

[tiyo76]

MERCI MERCI MERCI MERCI MERCI !

Tout tient maintenant en une seule ligne :

Code :

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

1
2
 
tbody.insertBefore(table.appendChild(child),childAvant);

Sujet résolu !!!