jQuery: déplacer la ligne de la table?

Question

Disons que je devais établir des liens avec les flèches haut / bas pour déplacer une rangée de table vers le haut ou le bas dans l'ordre. Quel serait le moyen le plus simple de déplacer cette rangée d’une position vers le haut ou vers le bas (avec jQuery)?

Il ne semble pas y avoir de moyen direct de faire cela en utilisant les méthodes intégrées de jQuery, et après avoir sélectionné la ligne avec jQuery, je n'ai pas trouvé de moyen de le déplacer ensuite. De plus, dans mon cas, rendre les lignes déplaçables (ce que j'ai déjà fait avec un plugin) n'est pas une option.

Answer 1

Vous pouvez également faire quelque chose de simple avec le réglage haut / bas.

Étant donné que vos liens ont une classe de up ou down vous pouvez le connecter au gestionnaire de clics des liens. Cela suppose également que les liens se trouvent dans chaque ligne de la grille.

 $(document).ready(function(){
    $(".up,.down").click(function(){
        var row = $(this).parents("tr:first");
        if ($(this).is(".up")) {
            row.insertBefore(row.prev());
        } else {
            row.insertAfter(row.next());
        }
    });
});
 

HTML:

 <table>
    <tr>
        <td>One</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Two</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Three</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Four</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
    <tr>
        <td>Five</td>
        <td>
            <a href="#" class="up">Up</a>
            <a href="#" class="down">Down</a>
        </td>
    </tr>
</table>
 

Démo - JsFiddle

Answer 2

Cela pourrait être utile: http://jqueryui.com/demos/sortable/