Question

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

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

这是功能：

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");

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

tr

正如Pawel所说[{3}}，问题是$("#artikelposition tr").each(function() { var that = $(this); if (that.data("position") == newPosition) { otherTr = that.data('artikelid'); } });是动态设置的。但即使他使用data-position的想法似乎也不适用于那里。

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. / p>

Tablerows的开关位置只能工作一次

2 个答案: