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

Here's a plugin可以拖放表格行

Answer 5

要将Row1向下移动一步，您可以执行以下操作：

$me = $("#Row1");
$me.after($me.nextSibling());

Answer 6

以下是交换行的代码。让我们走＃Row1和＃Row3

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

使用克隆（true）以便也考虑事件。

如果要上下移动行，请使用此代码。移动行

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

将行向下移动

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

Answer 7

我会尝试：

var tmp = $ ('#Row1')
$ ('#Row1').remove
$ ('#Row2').after ($ ('#Row1'))

但我想最好交换行的内容而不是自己交换行，这样你就可以依赖编号了。因此，

var tmp = $ ('#Row1').html ()
$ ('#Row1').html ($ ('#Row2').html ())
$ ('#Row2').html (tmp)

Answer 8

我在表（带子类别）中使用拖放插件，并且在不工作之后使用。插入后工作。 similiar topic

Answer 9

这是一个包含3个参数的通用函数：源行，目标行和指示行是向上还是向下移动的布尔值。

var swapTR = function (sourceTR, targetTR, isBefore) {
    sourceTR.fadeOut(300, function () {
        sourceTR.remove();
        if (isBefore) {
            targetTR.before(sourceTR);
        }
        else {
            targetTR.after(sourceTR);
        }
        sourceTR.fadeIn(300);
        initializeEventsOnTR(sourceTR);
    });
};

你可以这样使用它：

swapTR(sourceTR, targetTR, true);

Answer 10

我通常会做这样的事情：

    <table id="mytable">
    <tr>
        <td>row 1</td>
        <td><input type="hidden" value="↑" class="move up" /></td>
        <td><input type="button" value="↓" class="move down" /></td>
    </tr>
    <tr>
        <td>row 2</td>
        <td><input type="button" value="↑" class="move up" /></td>
        <td><input type="button" value="↓" class="move down" /></td>
    </tr>
    <tr>
        <td>row 3</td>
        <td><input type="button" value="↑" class="move up" /></td>
        <td><input type="button" value="↓" class="move down" /></td>
    </tr>
    <tr>
        <td>row 4</td>
        <td><input type="button" value="↑" class="move up" /></td>
        <td><input type="hidden" value="↓" class="move down" /></td>
    </tr>
</table>

<script>
    $('#mytable input.move').click(function() {
        var row = $(this).closest('tr');
        if ($(this).hasClass('up')){
            row.prev().before(row);
        }

        else{
            row.next().after(row);
        }            

        $(this).closest('table').find('tr:first').find('td:eq(1) input').prop('type', 'hidden');
        $(this).closest('table').find('tr:last').find('td:eq(2) input').prop('type', 'hidden');
        $(this).closest('table').find('tr').not(':first').not(':last').find('td:eq(1) input').prop('type', 'button');
        $(this).closest('table').find('tr').not(':first').not(':last').find('td:eq(2) input').prop('type', 'button');
    });
</script>

因此，这还将在第一行中隐藏UP，在最后一行中隐藏DOWN。如果在最后一行下降，则可以将其更改为再次回到顶部。但这就是我所需要的。

问候

在JQuery中交换行

10 个答案: