在 JQuery 中交换行答案

【问题标题】：Swapping rows in JQuery在 JQuery 中交换行
【发布时间】：2009-03-06 00:17:25
【问题描述】：

如果我有一个如下所示的表格，并且有一个上下箭头可以上下移动行，我将如何在 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>

【问题讨论】：

标签： jquery

【解决方案1】：

这是另一个解决方案。

向下移动一行：

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

向上移动一行：

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

【讨论】：

我更喜欢这个而不是接受的答案，因为您不需要知道另一行的 id（这可能不是页面加载时的位置，因为行已被移动）。
我个人在这个答案的单元格内添加了按钮，并使用$(this).closest("tr").next().after($(this).closest("tr"));绑定到$.click()函数

【解决方案2】：

这是一个稍微扩展的示例，希望您会发现它有用... :)

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

【讨论】：

【解决方案3】：

这是交换行的代码。让我们以#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());

【讨论】：

【解决方案4】：

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

会起作用

【讨论】：

此代码将 Row2 放在 Row1 之后。请参阅$.after 的文档。
@DanielAllenLangdon 是对的 - $("#Row1").after($("#Row2")); 不起作用。它应该是 $("#Row2").after($("#Row1")); 或 $("#Row1").insertAfter($("#Row2")); - 请参阅：api.jquery.com/after 和 api.jquery.com/insertAfter

【解决方案5】：

要将第 1 行向下移动一步，您可以：

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

【讨论】：

不是.nextSibling()，而是.next()，它可以是$me.insertAfter($me.next()); 或$me.next().after($me);，因为像您一样使用.after() 会将元素插入到之前的相同位置。在我看来，你的回答仍然是最优雅的成语，即$me.next().after($me); - 所以+1。 :)
语法非常流畅。 $me 部分让我有点惊讶。我一直使用 var me = $("#something"); 的语法。按照你的方式做有什么好处？（我对展示一些很棒的东西寄予厚望......）

【解决方案6】：

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

【讨论】：

【解决方案7】：

我会尝试：

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

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

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

【讨论】：

remove 可能会弄乱事件处理程序，所以我尽量避免它
哦，谢谢你的信息，会小心的 :-) 不过我的第二个例子没有使用它。

【解决方案8】：

我正在使用拖放插件来交换表格中的类别（带有子类别），并且在不工作之后。 insertAfter 工作。 similiar topic

【讨论】：

【解决方案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);

【讨论】：

【解决方案10】：

我通常会这样做：

<table id="mytable">
    <tr>
        <td>-------------ROW 1-----------</td>
        <td><input type="button" value="↑" class="move up" disabled /></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="button" value="↓" class="move down" disabled /></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('disabled', true);
        $(this).closest('table').find('tr:last').find('td:eq(2) input').prop('disabled', true );
        $(this).closest('table').find('tr').not(':first').not(':last').find('td:eq(1) input').prop('disabled', false);
        $(this).closest('table').find('tr').not(':first').not(':last').find('td:eq(2) input').prop('disabled', false);
    });
</script>

Editor Example

所以这也可以在第一行 UP 和在最后一行 DOWN。如果在最后一行下降，您可以将其更改为再次上升。但这就是我需要它的方式。

问候

【讨论】：