在JQuery中交换行

Question

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

<tr id="Row1">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>
<tr id="Row2">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>
<tr id="Row3">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>

Answer 1

这是另一种解决方案.

要向下移动一行:

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

要向上移动一行:

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

Answer 2

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

将工作

Answer 3

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

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

Answer 4

这是交换行的代码。让我们以#Row1 和#Row3 为例

$('#Row1').replaceWith($('#Row3').after($('#Row1').clone(true)));

使用clone(true) 以便事件也被考虑在内。

如果您想上下移动行，请使用此代码。向上移动行

var tableRow = $("#Row1");
tableRow.insertBefore(tableRow.prev());

向下移动行

var tableRow = $("#Row1");
tableRow.insertAfter(tableRow.next());