web-dev-qa-db-fra.com

Comment déplacer la ligne d'un tableau dans jQuery?

Disons que j'avais des liens avec les flèches haut/bas pour déplacer une ligne de table vers le haut ou vers le bas dans l'ordre. Quelle serait la façon la plus simple de déplacer cette ligne vers le haut ou vers le bas d'une position (à l'aide de jQuery)?

Il ne semble pas y avoir de moyen direct de le faire 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 la déplacer. De plus, dans mon cas, rendre les lignes glissables (ce que j'ai fait avec un plugin précédemment) n'est pas une option.

javascriptjqueryhtmldom
66
Wilco

Vous pouvez également faire quelque chose d'assez simple avec le haut/bas réglable.

étant donné que vos liens ont une classe up ou down, vous pouvez câbler cela dans le gestionnaire de clics des liens. Cela suppose également que les liens se trouvent à l'intérieur de 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

168
Quintin Robinson
$(document).ready(function () {
   $(".up,.down").click(function () {
      var $element = this;
      var row = $($element).parents("tr:first");

      if($(this).is('.up')){
         row.insertBefore(row.prev());
      } 
      else{
         row.insertAfter(row.next());
      }

  });

});

Essayez d'utiliser JSFiddle

11
Shemeemsha R A