[DOM] Trie tableau html en conservant les events onclick

Version imprimable

08/12/2008, 12h57
Orbiplanax

[DOM] Trie tableau html en conservant les events onclick

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
08/12/2008, 13h04
Jumano

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

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:

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.

09/12/2008, 10h10
E.Bzz
Bonjour,

Citation:

Envoyé par Orbiplanax

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:

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+
09/12/2008, 15h02
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
09/12/2008, 15h26
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:

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

voila voila...

A+
09/12/2008, 16h04
E.Bzz

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

A+