Salut !

Je suis en train d'essayer d'utiliser la méthode décrite dans ce cours pour déplacer les lignes de mon tableau, mais impossible de faire descendre mes lignes !

J'ai tenté de séparer monter et descendre en 2 fonctions pour "simplifier" le problème mais j'arrive au même résultat.

J'ai pas mal cherché mais je ne trouve pas d'où vient le problème (Firebug ne détecte pas d'erreur)...

Voici mon code (le JS est une copie de celui du cours) :

function deplacerLigne(source, cible)
{
    //on initialise nos variables
    var ligne = document.getElementById("tablo").rows[source];//on copie la ligne
    var nouvelle = document.getElementById("tablo").insertRow(cible);//on insère la nouvelle ligne
    var cellules = ligne.cells;

    //on boucle pour pouvoir agir sur chaque cellule
    for(var i=0; i<cellules.length; i++)
    {
        nouvelle.insertCell(-1).innerHTML += cellules[i].innerHTML;//on copie chaque cellule de l'ancienne à la nouvelle ligne
    }

    //on supprimer l'ancienne ligne
    document.getElementById("tablo").deleteRow(ligne.rowIndex);//on met ligne.rowIndex et non pas source car le numéro d'index a pu changer
}

<table id="tablo">
        <tr>
            <td>1</td>
            <td>
                <input type="button" value="Up" onclic="deplacerLigne(this.parentNode.parentNode.rowIndex, this.parentNode.parentNode.rowIndex-1);" />
                <input type="button" value="Dwn" onclic="deplacerLigne(this.parentNode.parentNode.rowIndex, this.parentNode.parentNode.rowIndex+1);" />
            </td>
        </tr>
        ...
</table>

(J'ai remplacé les onclick par des onclic parce que le forum affichait une erreur sinon.)

Dans un second temps, je souhaiterais valider la modification de l'ordre des lignes (le but est de proposer aux administrateurs d'un site de pouvoir gérer l'ordre des catégories dans un menu). Je suppose que je dois pouvoir enregistrer l'ordre en le faisant passer par un formulaire mais comment récupérer ce fameux ordre ?

Merci d'avance pour votre aide précieuse !

Si j'ai bien compris ton problème, ligne 6 du HTML: tu dois écrire this.parentNode.parentNode.rowIndex+2 à la place du +1
car tu insères la ligne avant ta référence donc en mettant +1 tu l'insère devant l'élément suivant c'est à dire au même endroit où il se trouve actuellement

Le code que tu présente est bien pour le tuto mais personnellement pour faire cette action j'aurais plutôt utilisé le DOM: En sachant qu'un élément ne peut être présent qu'une seule fois dans le DOM. Du coup si tu insères ton élément ailleurs cela déplace l'élément (il n'y a plus besoin de copier le contenu un par un et cela implique un gain de performance qui, parfois, n'est pas négligeable).

function deplacerLigne(source,cible){
	var tablo=document.getElementById("tablo");
	var ligne = tablo.rows[source];
	var reference = tablo.rows[cible];
	if(reference){
		reference.parentNode.insertBefore(ligne,reference); //ajoute l'élément devant l'élément cible
	}else{
		ligne.parentNode.appendChild(ligne); //ajoute la ligne à la fin
	}
}

Pour ta 2e question, c'est un peu plus complexe. Mais en gros il faudra que tu transmettes l'ordre des lignes. Pour cela tu peux parcourir le tableau (le .rows) et sauvegarder un identifiant de chaque ligne (par exemple le contenu de ta première colonne dans le tableau que tu montres ici).

Je soupçonnais pas du tout ça pour le +2, j'aurais pas trouvé tout seul. Et j'ai donc pris la solution alternative avec l'utilisation du DOM, merci du conseil.

Je vais pouvoir regarder la suite et je reviens vers vous si je bloque trop.

Merci à toi pour ces réponses efficaces !

Je poste la fonction que j'ai faite, qui a l'air de bien marcher même s'il y a peut-être une solution plus évoluée là aussi.

function sauveOrdre(){
    var lignes=document.getElementById("tablo").rows;
    var listeOrdre=new Array();
    for(var i=0;i<lignes.length;i++){
        listeOrdre[i]=lignes[i].cells[0].innerHTML;
    }
    document.getElementById("ordre").value=listeOrdre;
}

J'ai ajouté à ma balise form :

onsubmit="sauveOrdre();"

et à l'intérieur du formulaire :

<input type="hidden" name="ordre" id="ordre" value="" />

pour pouvoir passer les valeurs.

En espérant que ça pourra servir à d'autres