表格行的切换位置只能工作一次

Question

我发了jsfiddle

我有一张带有文章位置的表格。而且我会让用户可以通过单击向上或向下箭头来更改位置排序。

但是当我交换一次位置时，我无法再更改已更改行的位置。

函数如下：

function switchPosition( data, direction )
{
    var tableName = "artikelposition";
    currentPosition = parseInt( data['position'] );

    if( direction == "up" )
    {
        newPosition = currentPosition - 1;
    }
    else if( direction == "down" )
    {
        newPosition = currentPosition + 1;
    }

    var otherTr = $("tr[data-position='" + newPosition + "']").data("artikelid");
    console.log("clicked object" + data['artikelid'] + " : current position " + data['position'] + " : new position " + newPosition);
    console.log("other objekt" + $("#" + otherTr).data("artikelid") + " : current position " + $("#" + otherTr).data("position") + " : new Position " + currentPosition);

    $( "#" + data['artikelid'] )
        .data({
            "position": newPosition
        });
    $( "#" + data['artikelid'] + " td.tdArticleNumber span.spanPositionNummer" )
        .html( newPosition );


    $( "#" + otherTr )
        .data({
            "position": currentPosition
        });
    $( "#" + otherTr + " td.tdArticleNumber span.spanPositionNummer" )
        .html( currentPosition );

    sortTable( tableName );
}

Answer 1

正如 ASGM 已经提到的，问题在于 otherTr。在这一行：

var otherTr = $("tr[data-position='" + newPosition + "']").data("artikelid");

我仍然不知道为什么这个表达式总是返回第一个 tr 的 data-artikelid，但是如果你想保存你的代码，那么你可以使用以下内容替换这一行：

$("#artikelposition tr").each(function()
{
    var that = $(this);
    if (that.data("position") == newPosition)
    {
        otherTr = that.data('artikelid');
    }
});

正如 Pawel 所说的 there in comments，问题是 data-position 是动态设置的。但即使是他使用$("...").attr("data-...", value) 的想法似乎也行不通。

Answer 2

您可能可以用更少的代码完成此操作（请参阅jsfiddle）：

$(document).ready(function(){
    $(".rowUp,.rowDown").click(function(){
        var row = $(this).parents("tr:first");
        if ($(this).is(".rowUp")) {
            row.prev().find(".spanPositionNummer").html(row.index() + 1);
            row.insertBefore(row.prev());

        } else {
            row.next().find(".spanPositionNummer").html(row.index() + 1);
            row.insertAfter(row.next());
        }
        row.find(".spanPositionNummer").html(row.index() + 1);
    });
});

您可以将点击处理程序附加到图像和用户insertBefore() 以移动行。也可以使用内置的index()函数（而不是摆弄data-position）来设置位置号span。

（根据How to move table row in jQuery?的回答）

---

或者，如果您想使用现有代码执行此操作，错误似乎是您选择了错误的otherTr。

当你第一次点击顶行的向下箭头时，你可以在控制台中看到选中的行从位置1移到了2，中间的行从2移到了1：

Angeklicktes Objekt2445 : aktuelle Position 1 : neue Position 2 (index):59
Anderes Objekt2501 : aktuelle Position 2 : neue Position 1 (index):60

但是，当您单击现在顶行的底部箭头时，控制台记录的内容如下：

Angeklicktes Objekt2501 : aktuelle Position 1 : neue Position 2 (index):59
Anderes Objekt2501 : aktuelle Position 1 : neue Position 1 (index):60

请注意，顶行（正确地）从位置 1 移动到 2。但紧接着，同一行（Objekt2501，由相同位置引用）被指示从 1 移动到 1。