Discussion :

[Orbiplanax]

Bonjour à tous.

J'utilise actuellement une fonction javascript trouvée sur internet me permettant de trier le contenue d'un tableau HTML. Cette fonction me convenait très bien jusqu'à présent pour l'utilisation que j'en avais.

Le problème est que sur chaque <tr> ( ou <td> selon les tableaux ) j'ai maintenant un événement onclick="ma_fonction(id);". Avec id différent pour chaque ligne.

Le trie des valeurs des cellules du tableau marche bien mais les évènements onclick ne sont pas déplacés.

Donc si je trie mon tableau puis que je clique sur une ligne, la fonction JS exécuter n'aura pas le paramètre id correspondant aux informations affichées sur la ligne.

Ma question est donc : Connaitriez vous un script de tri que me permettrais de remédier à cette erreur.

Merci d'avance

[Jumano]

Bonjour,
Avec un peu de code ce serait plus simple ....

[Orbiplanax]

Voila le code que j'utilise. Ce code n'essaie pas de trier les onClick... Je ne pense pas que ce soit simple de le rajouter, c'est pourquoi je demandais si quelqu'un avait un autre script qui sache faire cela.

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
<script language="Javascript">
 
    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; }
 
    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!="TH";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>

PS : Je ne sais plus d'où je tiens ce script. Mais un grand merci à celui(celle) qui la écrit il m'a été très utile.

[E.Bzz]

Bonjour,

Le problème est que sur chaque <tr> ( ou <td> selon les tableaux ) j'ai maintenant un événement onclick="ma_fonction(id);". Avec id différent pour chaque ligne.

Le trie des valeurs des cellules du tableau marche bien mais les évènements onclick ne sont pas déplacés.

Au lieu de faire référence à un id "en dur", tu peux essayer d'y faire référence de manière relative.
Par exemple

Code :

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

1
2
3
onclick="la_fonction(this.id);"
onclick="la_fonction(this.lastChild.id);"
etc.

En tenant compte des contraintes DOM
Mais ça dépend de la structure de ton tableau et de l'id ciblé. A voir ...

A+

[Orbiplanax]

Très bonne idée. Je crois que j'allais encore chercher trop loin.

J'essaie de voir si ça peut marcher...

Merci a vous

[Orbiplanax]

Hehehe , c'est parfait

Encore merci.

Mon event onclick étant lié à ma balise tr.
Pour récupérer le texte contenu dans mon premier td sur cette ligne (la colonne ou j'affiche l'id)

Il suffit de faire un

Code :

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

row.onclick = function(){click_tab(this.firstChild.firstChild.nodeValue);};

voila voila...

A+

[E.Bzz]

Pour éviter des réactions différentes suivant les nav, il te faudrait utiliser un nodeCleaner ...

A+