Action "Monter/Descendre"
Bonjour à tous,
Je dois en ce moment développer un système de bouton "monter/descendre".
Avant que tout le monde s'exclame " :recherch: " !!! 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:
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 ! ;)
