Ré-ordonner un tableau HTML
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:
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 |
|
|
| valeur 1 |
valeur 2 |
valeur 3 |
valeur 4 |
| valeur 5 |
valeur 6 |
valeur 7 |
valeur 8 |
| valeur 9 |
valeur 10 |
|
|
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
| 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 :aie:).
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à... :triste:
PS : le code var subMenuTables = ["Paragraph.ElementWithStyle","Styles.Styles"]; est par ce qu'en réalité j'ai deux tableaux à ré-ordonner... :lol:
