Discussion :

[ludojojo]

Bonjour,

J'ai un petit soucis pour ré-ordonner un tableau HTML avec l'utilisation de la fonction jquery .clone(true,true). (peut-être pas la meilleur solution...)
J'ai un tableau assez compliqué, généré par un outil tiers (SharePoint) qu'il faut que je réordonne. En effet ce dernier à un certain nombre de trous, "td" vides, et il faut que je lui redonne un aspect plus propre !

Voici un exemple :
- Etat actuel

Code html :

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

1
2
3
4
5
6
7
8
<table unselectable="on" class="ms-cui-gallery" id="Ribbon.EditingTools.CPEditTab.Paragraph.ElementWithStyle.Menu.Styles.Gallery">
    <tbody unselectable="on">
        <tr unselectable="on">
            <td unselectable="on" class="ms-cui-gallery-td ms-cui-gallery-element-sizeCustom">[...]value1[/...]</td>
            <td unselectable="on" class="ms-cui-gallery-td ms-cui-gallery-element-sizeCustom">[...]empty[/...]</td> =>Hidden
            <td unselectable="on" class="ms-cui-gallery-td ms-cui-gallery-element-sizeCustom">[...]value1[/...]</td>
            <td unselectable="on" class="ms-cui-gallery-td ms-cui-gallery-element-sizeCustom">[...]empty[/...]</td> =>Hidden
[/...]

Le tout sur sur plusieurs lignes, plusieurs colonnes...
Ca donne un aspect visuel sous la forme :

valeur 1
valeur 2




valeur 3
valeur 4
valeur 5
valeur 6
valeur 7

valeur 8
valeur 9
valeur 10

Le rendu que je souhaite est le suivant :

valeur 1
valeur 2
valeur 3
valeur 4

valeur 5
valeur 6
valeur 7
valeur 8

valeur 9
valeur 10

Pour cela, j'utilise la fonction clone, et recréé mon tbody pour afficher ce que je veux :

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
function OrderTableElement(SubMenuElement){    
    var subMenuTables = ["Paragraph.ElementWithStyle","Styles.Styles"];
    for(subMenuTable in subMenuTables){
        var currentTable = SubMenuElement.find("table[id*='"+ subMenuTables[subMenuTable] +"']");
        var tds = currentTable.find("td").clone(true, true);
 
        var tbdy=document.createElement('tbody');
        tbdy.setAttribute("unselectable", "on", 0);
 
        var currentColumn = 0;
        var currentRow = 0;
        for (var i = 0; i < tds.length; i++,currentColumn++) {
            if(i == 0 || i%4 == 0){
                row = tbdy.insertRow(currentRow);
                row.setAttribute("unselectable", "on", 0);
                currentColumn = 0;
                currentRow++;
            }
            column = row.insertCell(currentColumn);
            column.setAttribute("unselectable", "on", 0);
            column.className = "ms-cui-gallery-td ms-cui-gallery-element-sizeCustom";
            column.innerHTML = tds[i].innerHTML;
        } 
 
        currentTable.append(tbdy);
    }
}

Mon problème, c'est que quelque part bien en dessous de chaque td, j'ai une div avec des handlers (que je ne maîtrise pas du tout et ne peux réappliquer moi même ).
Et c'est là que je pensais arriver à mes fins avec la fonction .clone(true,true).
Est-ce que je l'utilise mal ?
Est-ce que vous pensez qu'il y a une meilleur solution pour effectuer le tri de mon tableau sans le vider ?

J'avoue avoir besoin de vos lumières, par ce que je tourne un peu en rond là...

PS : le code var subMenuTables = ["Paragraph.ElementWithStyle","Styles.Styles"]; est par ce qu'en réalité j'ai deux tableaux à ré-ordonner...

[danielhagnoul]

Bonjour

Je n'ai pas le temps de regarder votre code dans le détail, mais je vous suggère deux pistes :

1. Plugin dvjhClone
   
2. Comment puis-je filtrer dynamiquement une table ?

[ludojojo]

Plugin dvjhClone

Testé mais même problème... en regardant le code, il semble qu'il utilise également la fonction .clone(true,true).

Comment puis-je filtrer dynamiquement une table ?

En effet je l'avais vu, mais cette fonction permet de filtrer les lignes/colonnes à afficher dans un tableau qui est complet... Moi je voudrais juste organiser tous mes TD de façon à n'afficher que des lignes complètes, donc qu'elles aient le même nombre de colonnes, et aucune de vide...

[SpaceFrog]

filtrer ...
http://www.developpez.net/forums/d10...eurs-colonnes/

... en relisant j'ai compris ta demande

http://jsfiddle.net/n33Sc/

[ludojojo]

... en relisant j'ai compris ta demande
http://jsfiddle.net/n33Sc/

Merci c'est exactement l'idée, mais est ce qu'il est possible de copier les évènement liés aux différents éléments (sous chaque td) ?
Dans l'exemple que tu fournis, qui m'énerve vu comme cela semble simple , tu manipules le texte contenu dans les différentes colonnes, est ce qu'il est possible de faire de même avec le DOM complet d'un TD et tous les handlers associés ? La fonction .clone(true,true) est-elle la seule solution ? Par ce qu'elle ne semble pas fonctionnée dans mon cas...

[SpaceFrog]

Je te propose alors de juste déplacer les cellules (balises td) au lieu de modifier leur contenu
elle conserveront ainsi leurs propriétés et méthodes liées.

Le principe
on parse le table pour constituer deux array collections l'un contenant les td non vides, l'autre contenant les td vides
il suffit de boucler d'abord sur l'array des td non vides pour les appender dans les lignes tr en incrementant le nr de ligne tr:eq(?) selon le nombre de cellules par lignes (cpl)
on fait ensuite la même chose avec l'array des cellules vides à la suite ...

http://jsfiddle.net/n33Sc/2/

dans cet exemple les td affichent leur id sur le click, on constate que les cellules n'ont pas perdu leurs evenements ...