javascript - tablas - ¿Cómo mover la fila de la tabla en jQuery?

recorrer tabla javascript

Question

Supongamos que tengo enlaces con flechas arriba / abajo para mover una fila de la tabla hacia arriba o hacia abajo en orden. ¿Cuál sería la forma más directa de mover esa fila hacia arriba o hacia abajo una posición (usando jQuery)?

No parece haber ninguna manera directa de hacer esto usando los métodos integrados de jQuery, y después de seleccionar la fila con jQuery, no he encontrado una manera de moverlo. Además, en mi caso, hacer que las filas sean arrastrables (lo que he hecho con un plugin anteriormente) no es una opción.

Answer 1

También podría hacer algo bastante simple con el ajuste hacia arriba / abajo ...

dado que sus enlaces tienen una clase de up o down , puede conectar esto en el controlador de clic de los enlaces. Esto también es bajo la suposición de que los enlaces están dentro de cada fila de la grilla.

$(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>

Demostración - JsFiddle

Answer 2

$(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());
      }

  });

});

Intenta usar JSFiddle