[Help] Combiner un tri de tableau et un survol souris

Signaler
Messages postés
2
Date d'inscription
vendredi 20 mars 2015
Statut
Membre
Dernière intervention
20 mars 2015
-
Messages postés
2
Date d'inscription
vendredi 20 mars 2015
Statut
Membre
Dernière intervention
20 mars 2015
-
Bonjour à tous,
Je viens vers vous avec une question plutôt précise...

Voila, je classe des données dans un tableau qui est affiché sur une page html.

Un script (script 1) permet à l'utilisateur de trier le tableau selon la colonne de son choix en cliquant sur des flèches dans les titres.

J'ai un autre script (script 2) qui est lié aux lignes du tableau et qui affiche une image dans une autre zone de la page html en fonction de la position de la souris sur le tableau.

Mon soucis : quand l'utilisateur réordonne les lignes, l'image affichée correspond à celle de l'ancienne ligne et non à celle de la nouvelle ligne...

Je pense qu'il faudrait réactiver le script 2 lors du clic souris de l'utilisateur pour la réorganisation des lignes (script 1) mais je ne vois pas comment faire.

Voilà, j'espère que quelqu'un pourra m'aider ;)

1 réponse

Messages postés
2
Date d'inscription
vendredi 20 mars 2015
Statut
Membre
Dernière intervention
20 mars 2015

Mes scripts :

Script 1 :
En début de page j'ai ce script :

#trier { background-color:white; color:black; border-collapse:collapse; BORDER:white 1px solid; FONT:12 Arial; TEXT-ALIGN:center }
#trier TR { background-color:#ffefd5 }
#trier .title { background-color:#bf2b2f; FONT:14 Arial; color:#ffffff; font-weight:bold }
SPAN { FONT:bold 12 Arial; CURSOR:pointer }
BODY { background-color:#FFF5E5 }
#trier TD { BORDER:white 1px solid; }
SPAN { FONT:bold 12 Arial; CURSOR:pointer }
BODY { background-color:#FFF5E5;}



var index
function sort_int(p1,p2) { return p1[index]-p2[index]; } //fonction pour trier les nombres
function sort_char(p1,p2) { return ((p1[index]>=p2[index])<<1)-1; } //fonction pour trier les strings

function TableOrder(e,Dec) //Dec= 0:Croissant, 1:Décroissant
{ //---- Détermine : oCell(cellule) oTable(table) index(index cellule) -----//
var FntSort = new Array()
if(!e) e=window.event
for(oCell=e.srcElement?e.srcElement:e.target;oCell.tagName!="TD";oCell=oCell.parentNode); //determine la cellule sélectionnée
for(oTable=oCell.parentNode;oTable.tagName!="TABLE";oTable=oTable.parentNode); //determine l'objet table parent
for(index=0;oTable.rows[0].cells[index]!=oCell;index++); //determine l'index de la cellule

//---- Copier Tableau Html dans Table JavaScript ----//
var Table = new Array()
for(r=1;r<oTable.rows.length;r++) Table[r-1] = new Array()

for(c=0;c<oTable.rows[0].cells.length;c++) //Sur toutes les cellules
{ var Type;
objet=oTable.rows[1].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"")
if(objet.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) { FntSort[c]=sort_char; Type=0; } //date jj/mm/aaaa
else if(objet.match(/^[0-9£?$\.\s-]+$/)) { FntSort[c]=sort_int; Type=1; } //nombre, numéraire
else { FntSort[c]=sort_char; Type=2; } //Chaine de caractère

for(r=1;r<oTable.rows.length;r++) //De toutes les rangées
{ objet=oTable.rows[r].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"")
switch(Type)
{ case 0: Table[r-1][c]=new Date(objet.substring(6),objet.substring(3,5),objet.substring(0,2)); break; //date jj/mm/aaaa
case 1: Table[r-1][c]=parseFloat(objet.replace(/[^0-9.-]/g,'')); break; //nombre
case 2: Table[r-1][c]=objet.toLowerCase(); break; //Chaine de caractère
}
Table[r-1][c+oTable.rows[0].cells.length] = oTable.rows[r].cells[c].innerHTML
}
}

//--- Tri Table ---//
Table.sort(FntSort[index]);
if(Dec) Table.reverse();

//---- Copier Table JavaScript dans Tableau Html ----//
for(c=0;c<oTable.rows[0].cells.length;c++) //Sur toutes les cellules
for(r=1;r<oTable.rows.length;r++) //De toutes les rangées
oTable.rows[r].cells[c].innerHTML=Table[r-1][c+oTable.rows[0].cells.length];
}




Script 2:

Dans une autre zone j'ai l'affichage de "Apercu".
Chaque ligne de mon tableau a une id, et en fin de page j'ai ce script qui permet d'afficher une image dans ma zone "Apercu" :


document.getElementById("advisor").addEventListener("mouseover",function(){
document.getElementById("Apercu").src="monimage.jpg";
},false);