JS / JQUERY: перемещение нумерованных строк таблицы вверх и вниз без потери пользовательского ввода

Question

Я создал таблицу в HTML, состоящую из строк таблицы в теге tbody.Я использовал фрагмент кода javascript от mredkj.com, чтобы иметь возможность добавлять строки и удалять их.Строки отсортированы, и их ранг находится в первой TD (ячейке) в каждом TR (строке).

Теперь я хотел бы добавить функциональность, заключающуюся в возможности вручную «прибегать» к таблицам.

Проблемы:

• мои знания javascript / jquery очень ограничены
• ряды таблиц не обновляются (когда вы удаляете строку, строки обновляются
  'функция reorderRows, но вызов этой функции из моего jQuery, похоже,
  не решает проблему)
• пользовательский ввод в текстовой области стирается, как только нажимаются кнопки вверх или вниз.

Например: пользователь добавляет TR, который добавляется в конец текущего списка таблиц, заполняет текстовую область и решает, что заполненные строки должны быть на первом месте,поэтому она нажимает стрелку вверх пару раз, пока она не окажется сверху.Ранг строки теперь # 1, а ввод по-прежнему в текстовой области.

Мои вопросы:

• Кто-нибудь знает, как я могу заставить строки обновлять свой рейтинг, когдапользователь перемещает строку?
• Как сохранить ввод пользователя?

Любая помощь очень ценится, и если у вас есть какие-либо другие предложения, пожалуйста, поделитесь ими.

Код здесь: http://jsbin.com/eyefu5/edit - по какой-то причине перемещение вверх и вниз не работает в js bin, но работает, когда я запускаю его в своем браузере.

Answer 1

Я обновил ваш код, чтобы сделать то, что, по вашему мнению, вы пытались сделать: http://jsbin.com/eyefu5/9/

Мои основные изменения касались следующей логики обмена:

function swap(a, b){
  b.before(a);
  reorderRows(document.getElementById(TABLE_NAME), 0);
}

function getParent(cell){ return $(cell).parent('tr'); }

$('#diagnosetabel').on('click', '.upArrow', function(){
    var parent = getParent(this);
    var prev = parent.prev('tr');

    if(prev.length == 1){ swap(parent, prev); }
});

$('#diagnosetabel').on('click', '.downArrow', function(){
    var parent = getParent(this);
    var next = parent.next('tr');

    if(next.length == 1){ swap(next, parent); }
});

Самое большое отличиечто я переключил код подкачки на использование метода jQuery before, который позаботится обо всем за вас.Я также добавил вызов к методу reorderRows, который вы уже использовали.В данный момент он начинается с начала и переупорядочивает все числа после перестановки, но вы можете сузить это по мере необходимости, потому что вы знаете только две строки, которые были изменены.

Надеюсь, это поможет!