javascript - 让某些 td 交换位置

Question

我试图让某些 td(不是全部)不同的 tr 与它们正上方或下方的位置交换位置。我只想要最后 3 个 td 而不是整行。我似乎很难找到只做我想要的 3 个 td 的东西，而不是整行。

你可以看到我在这里设置的例子:http://codepen.io/anon/pen/qwHbz

我知道你可以这样做:

$("#Row1").after($("#Row2"));

但是我不想要整行。因此，如果我在包含它的第一行上单击 .saTableDown，我希望目标、级别和指令与其下方的交换，依此类推。在 jquery/javascript 中可能有这样的事情吗？如果是这样，我似乎无法弄清楚。感谢阅读!

Answer 1

这是你想要的吗？

http://codepen.io/anon/pen/rEJxH

我会找到你向上/向下点击的 tr 的索引，如果它不是第一个/最后一个，将它与上一个/下一个 tr 交换.然后将数字交换回去。我已将数字 td 指定为 .num 类，将目标 td 指定为 .target 类，我假设您有权访问标记以便能够执行此操作.

jQuery:

$('.saTableUp').click(function(){
    //find the index of the parent tr
    var parentTr = $(this).parent().parent();
    var index = parentTr.index();

    // if not the first element
    if (index > 1) {
      var parentSwap = parentTr.prev();
      //swap rows
      parentSwap.before(parentTr);
      // move one number up a row
      parentTr.children('.num').before(parentSwap.children('.num'));
      // move other number (now the second .num in the row) down a row
      parentSwap.children('.target').before(parentTr.children('.num:eq(1)'));
    }
});

$('.saTableDown').click(function(){
    //find the index of the parent tr
    var parentTr = $(this).parent().parent();
    var index = parentTr.index();

    // if not the last element
    if (index < 4) {
      var parentSwap = parentTr.next();
      //swap rows
      parentSwap.after(parentTr);
      // move one number down a row
      parentTr.children('.num').before(parentSwap.children('.num'));
      // move other number (now the second .num in the row) up a row
      parentSwap.children('.target').before(parentTr.children('.num:eq(1)'));
    }
});