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...