Discussion :

[Maxime_]

Bonjour,

Je souhaite pouvoir modifier l'ordre des lignes dans un tableau HTML via un javascript. J'aimerais le faire en manipulant les objets 'row' du DOM, et ne pas manipuler seulement les contenus de mes cellules. Mais voilà je bloque un peu sur la façon de procéder.

Donc si quelqu'un a une petite idée (je sais pas si j'ai été bien clair sur mon problème ...)

Merci d'avance.

[javatwister]

j'ai une super idée: un drag&drop des lignes à un autre endroit du tableau!

ça t'intéresse?


sinon, n'hésite pas à préciser (ce que tu && comment tu veux le) {faire};

[Maxime_]

Merci pour ta réponse.

Hou la la, drag'n drop ... ne parle pas trop fort mon client pourrait t'entendre et vouloir ça ... lol
Mais dans le principe c'est ça, je veux déplacer une ligne d'un endroit a l'autre d'un tableau, pas avec un Drag'n Drog, mais selon des critères sur les lignes.

En fait pour être plus précis, j'ai un tableau avec de ligne fille au départ. Je veux pourvoir ajouter des lignes mères à la fin de mon tableau (ça j'arrive a le faire), et ensuite mettre certaines lignes filles sous une ligne mère. J'ai déjà le principe de selection des lignes pour savoir quelle ligne a déplacer, ce qui me bloque c'est de placer des lignes sous une autre ligne.

[javatwister]

en gros, quand tu veux insérer qqch en fin d'élément parent, tu utilises appendChild();
sinon, tu peux l'insérer avant tel ou tel élément, en utilisant inserBefore();

[Maxime_]

Ok merci je vais essayer avec ça.

[Maxime_]

Me revoilà sur mon problème que j'avais laissé de coté pendant quelque temps.
J'ai donc implémenté ta solution mais ça ne veux pas fonctionner. Voici le code :

Code :

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

1
2
3
4
5
6
7
8
9
 
liste_checkbox = document.getElementsByName('mes_cases_a_cocher[]');
obj_table_detail = document.getElementById('table_lignes_facture');
for (var ind_ligne=0;ind_ligne<liste_checkbox.length;ind_ligne++){
  if (liste_checkbox[ind_ligne].checked) {
    index_ligne_a_deplacer = liste_checkbox[ind_ligne].parentNode.parentNode.rowIndex;
    obj_table_detail.insertBefore(obj_table_detail.rows[index_ligne_a_deplacer],obj_table_detail.rows[index_ligne_a_deplacer-1].id);
    }
}

J'ai une erreur sur le insertBefore, l'argument 1 ne serais pas valide selon FFx.

Quelqu'un aurait une petite idée ?

[Maxime_]

Bon et bien j'ai trouvé la solution.
Pour ceux que ça pourrait aider voici le code qui va bien (il permet de remonter une ligne sélectionée par une case a cocher :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
liste_checkbox = document.getElementsByName('mes_cases_a_cocher[]'); 
obj_table_detail = document.getElementById('table_lignes_facture'); 
for (var ind_ligne=0;ind_ligne<liste_checkbox.length;ind_ligne++){ 
  if (liste_checkbox[ind_ligne].checked) { 
    index_ligne_a_deplacer = liste_checkbox[ind_ligne].parentNode.parentNode.rowIndex; 
   trClone = liste_checkbox[index_ligne_a_deplacer].parentNode.parentNode.cloneNode(true);
   obj_table_detail.tBodies[0].insertBefore(trClone,obj_table_detail.rows[index_ligne_a_deplacer-1]);
   obj_table_detail.tBodies[0].deleteRow(index_ligne_a_deplacer+1);
 
    } 
}

Il fallait en fait mettre un tbody dans mon tableau, sans quoi ça ne fonctionne pas.

[SpaceFrog]

suffit de mettre la main sur l'objet ligne avec un getElementById ou autre puis faire un appendChild ou insertBefore ...
la ligne est automatiquement déplacée ...