Déplacement de lignes dans un tableau HMTL

Version imprimable

18/01/2006, 18h09
Maxime_

Déplacement de lignes dans un tableau HMTL

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.
18/01/2006, 18h23
javatwister

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

ça t'intéresse? :lol: :lol:

sinon, n'hésite pas à préciser (ce que tu && comment tu veux le) {faire};
18/01/2006, 18h39
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.
18/01/2006, 20h52
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();
19/01/2006, 10h45
Maxime_

Ok merci je vais essayer avec ça.

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:

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 ?

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:

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.

27/01/2006, 09h43
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 ...