Ordonner un tableau (ok sous FF, rien sous ie)
Bonjour,
voici un code que j'ai écrit afin d'ordonnancer un tableau. j'ai épuré au max le code qui est normalement plein de css et s'adapte dynamiquement au tableau.
il fonctionne sous FF mais je n'ai aucun résultat sous ie.
après de nombreux essais, j'en suis venu à la conclusion que mon problème provient de document.onmousedown=drag; et de la fonction drag (c'est pourquoi j'ai créé la fonction action_down_img() pour les tests). (sous ie il faudra aussi que j'ajoute une ligne vide inactive en fin de tbody)
ce code est bien sur libre d'utilisation et je peux fournir toute la partie dynamique php, css et les fonctions js qui adaptent ce code pour n'importe quel tableau.
merci d'avance de votre aide pour l'adaptation sur ie.
la page est http://gaia-mundi.net/essai_ordre.html et voici 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
| <html>
<head>
<script language="JavaScript">
//###ORDONNANCEMENT DU TABLEAU
var corps_menu;var tr_index;var deplcmt;var y_clic;
function deplacerTR(w){//enregistre la position du curseur
y_souris = (navigator.appName.substring(0,3) == "Net") ? w.pageY : event.y+document.body.scrollTop;
return false;
}
function indexRow_select(elmt){//trouver l'index du TR à partir de l'image move
var elmt_parent = elmt.parentNode;
while(elmt_parent.tagName!='TR') elmt_parent = elmt_parent.parentNode;
var id_tr = elmt_parent.rowIndex ;
return id_tr;
}
function inserer(indexA){var a=5;
if(y_souris<y_clic){//monter
corps_menu.insertBefore(corps_menu.rows[tr_index],corps_menu.rows[indexA-1]);
y_clic=parseInt(y_souris-5);tr_index=indexA-1;
}else if(y_souris>y_clic){//descendre
corps_menu.insertBefore(corps_menu.rows[tr_index],corps_menu.rows[indexA]);//tr_index+2
tr_index=indexA-1;y_clic=parseInt(y_souris)+a;
}
}
function drag(){//DEBUT
if(deplcmt=='on'){//actions lors du clic
document.onmouseup= drop;
return false;
}
}
function action_down_img(){//à faire lors du drag
y_clic=y_souris;
var tds=corps_menu.getElementsByTagName("TD");//actions sur les TD pendant le déplacement
for(i=0 ; i<tds.length ; i++){
tds[i].onmouseover = function(){inserer(indexRow_select(this));};
}
document.body.style.cursor = 'move';//curseur de déplacement
var tds=corps_menu.rows[tr_index].getElementsByTagName("TD");
for(i=0 ; i<tds.length ; i++){
tds[i].onmouseover = function(){};
}
return false;
}
function drop(){//FIN
deplcmt='off';
var tds=corps_menu.getElementsByTagName("TD");//effacer les actions des TD après déplacement
for(i=0 ; i<tds.length ; i++){
tds[i].onmouseover = function(){};
}
document.body.style.cursor = '';
document.onmouseup = null;
}
document.onmousemove = deplacerTR;
document.onmousedown = drag;
</script>
</head>
<body onload="corps_menu=document.getElementById('corps_menu');y_clic=0;tr_index=null;deplcmt='off';">
<table id="table_menu" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>N°</td>
<td>Noms</td>
<td>Actions</td>
</tr>
</thead>
<tbody id="corps_menu">
<tr>
<td >1. </td>
<td>1ère rubrique</td>
<td>
<img onmousedown="tr_index=indexRow_select(this)-1;deplcmt='on';action_down_img();" src="http://systeme.gaia-mundi.net/images/ordonner.png">
</td>
</tr>
<tr>
<td>2. </td>
<td>2ème rubrique</td>
<td><img onmousedown="tr_index=indexRow_select(this)-1;deplcmt='on';action_down_img();" src="http://systeme.gaia-mundi.net/images/ordonner.png"></td>
</tr>
<tr>
<td>3. </td>
<td>3ème rubrique</td>
<td><img onmousedown="tr_index=indexRow_select(this)-1;deplcmt='on';action_down_img();" src="http://systeme.gaia-mundi.net/images/ordonner.png"></td>
</tr>
<tr>
<td>4. </td>
<td>4ème rubrique</td>
<td><img onmousedown="tr_index=indexRow_select(this)-1;deplcmt='on';action_down_img();" src="http://systeme.gaia-mundi.net/images/ordonner.png"></td>
</tr>
</tbody>
</table>
</body>
</html> |
