Положения переключателей Tablerows работать только один раз

Question

Я сделал jsfiddle

У меня есть таблица с articlepositions. И я сделал бы это возможным, чтобы Пользователь мог изменить сортировку позиции, нажав стрелки вверх или вниз.

Но когда я заменяю позицию, я больше не мог изменить положение измененной строки.

Вот функция:

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 первого tr, но если вы somewhy хотите сохранить свой код, чем вы можете использовать заменить эту строку с чем-то вроде:

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

As 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.