在JQuery中交换行

如果我有一个如下所示的表,并且有一个向上和向下移动行的箭头,我将如何在JQuery中交换行？

  Some label
  Some complex control


  Some label
  Some complex control


  Some label
  Some complex control

小智.. 63

这是另一种解决方案.

要向下移动一行:

jQuery("#rowid").next().after(jQuery("#rowid"));

要向上移动一行:

jQuery("#rowid").prev().before(jQuery("#rowid"));

我更喜欢这个接受的答案,因为你不需要知道另一行的id(可能不是页面加载时的位置,因为行已被移动). (6认同)

我个人在单元格中添加按钮给这个答案并使用`$(this).closest("tr").next().after($(this).closest("tr"));`绑定到`$. click()`函数 (5认同)

---

cobbal.. 26

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

将工作

1> 小智..：

---

这是另一种解决方案.

要向下移动一行:

jQuery("#rowid").next().after(jQuery("#rowid"));

要向上移动一行:

jQuery("#rowid").prev().before(jQuery("#rowid"));

---

我更喜欢这个接受的答案,因为你不需要知道另一行的id(可能不是页面加载时的位置,因为行已被移动).

---

我个人在单元格中添加按钮给这个答案并使用`$(this).closest("tr").next().after($(this).closest("tr"));`绑定到`$. click()`函数

2> cobbal..：

---

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

将工作

---

此代码将Row2放在Row1之后.请参阅`$ .after`的文档.

---

@DanielAllenLangdon是对的 - $("#Row1").after($("#Row2"));`不起作用.它应该是`$("#Row2").after($("#Row1"));`或`$("#Row1").insertAfter($("#Row2"));` - 见: http://api.jquery.com/after/和http://api.jquery.com/insertAfter/

3> Tod Thomson..：

---

这是一个稍微扩展的例子,希望你会发现它很有用...... :)

$('table').on('click', '.move-up', function () {
    var thisRow = $(this).closest('tr');
    var prevRow = thisRow.prev();
    if (prevRow.length) {
        prevRow.before(thisRow);
    }
});

$('table').on('click', '.move-down', function () {
    var thisRow = $(this).closest('tr');
    var nextRow = thisRow.next();
    if (nextRow.length) {
        nextRow.after(thisRow);
    }
});