JQuery: переместить строку таблицы в первую позицию, а затем обратно

Question

Мне нужно переместить строку таблицы с позиции на первую в таблице и после повторного нажатия на старую позицию.

У меня есть список флажков в таблице. Они исходят из кода и уже отсортированы. Если я нажму на флажок, я хочу переместить эту запись в начало списка. Если пользователь снимает этот флажок или нажимает на другой блок, он должен быть перемещен в старое положение.

для лучшего понимания:

 [ ] 1
 [ ] 3
 [ ] A
 [ ] B
 [ ] C

После нажатия, например, на [ ] C

 [X] C
 [ ] 1
 [ ] 3
 [ ] A
 [ ] B

После нажатия, например, на [ ] 3 C получил старую позицию и 3 переместился на вершину.

 [X] 3
 [ ] 1
 [ ] A
 [ ] B
 [ ] C

Мне удалось подняться на вершину. Но как мне снова переместить строку в старую позицию?

пример с рабочим кодом для перемещения наверх :

http://jsfiddle.net/6F5mQ/

Answer 1

Посмотрев все остальные примеры и выяснив, что они не совсем работают должным образом, я решил создать такой, который работает.

Вот пример | С эффектами |Код

var $tbody =  $("table tbody");

var last_position = -1;
$("input").click(function(){
    var $row = $(this).closest("tr"),
        $first_row = $tbody.find("tr:first-child"),
        $trs = $tbody.find("tr");

    if($row.index() == $first_row.index()){
        if( last_position > 0 ){
            $trs.eq(last_position).after($row);
            last_position = -1;
        }
        return;
    }else if(last_position > 0){
       $trs.eq(last_position).after($first_row);
    }

    $tbody.find("input").not(this).attr("checked", false);

    last_position = $row.index();

    $tbody.prepend($row);
});

---

Вы описываете два типа действий

1. Пользователь нажимает на ввод, который не первая строка, первая строка перемещается назад,эта строка перемещается вверх
2. Пользователь щелкает ввод первой строки, строка которой уже была перемещена, первая строка перемещается назад

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

var last_position = -1;

Затем мы определяем переменные, которые будем использовать

var $row = $(this).closest("tr"),               //input row clicked
    $first_row = $tbody.find("tr:first-child"), //first row
    $trs = $tbody.find("tr");                   //all the table rows, so we can switch 'em around

Затем мы проверяем, была ли нажата первая строка, и сбрасываем last_position, если это так.Мы также следим за тем, чтобы последняя позиция еще не была сброшена или находилась на 0-й позиции, поскольку в этих случаях она не должна двигаться.

if($row.index() == $first_row.index()){
    if( last_position > 0 ){
        $trs.eq(last_position).after($row);
        last_position = -1;
    }
    return;
}else if(last_position > 0){
   $trs.eq(last_position).after($first_row);
}

Наконец, мы снимаем все остальные поля, обновляем последнююпоместите его в этот ряд, а затем поместите его сверху.

$tbody.find("input").not(this).attr("checked", false);

last_position = $row.index();

$tbody.prepend($row);

Answer 2

Я бы сохранил позицию каждого tr и переместил бы ее обратно, если / когда это необходимо.

Я обновил код в соответствии с комментарием ShadowScripter

http://jsfiddle.net/gguNM/1/

Новое обновление http://jsfiddle.net/gguNM/2/

$('table tr').each(function () {
  var $this  = $(this).data({position: $(this).index()}),
      $table = $this.closest('table'),
      $input = $this.find('input');

  $input.bind('click', function (e) {
    var $first = $table.find('tr:first'),
        position;

    if ($(this).is(':checked')) {
      position = $first.data('position');
      $table.find('tr input').not($(this)).removeAttr('checked');

      if (position != 0) $first.insertAfter($table.find('tr').eq(position));
      $this.prependTo($table);
    } else if ($this.data('position') != 0) {
      position = $this.data('position');
      $this.insertAfter($table.find('tr').eq(position));                
    }
  });
});​

Answer 3

Вы можете сделать что-то вроде (отредактировано, чтобы очистить код и исправить некоторые проблемы)

var lastIndex;
$("input").click(function() {
    var $tbody = $(this).closest("tbody");
    var $tr = $(this).closest("tr");
    if($tr.index() === 0) return;
    $tbody.find("tr:first input:checkbox").prop('checked', false);
    if (lastIndex === undefined) {
        lastIndex = $tr.index();
        $tr.insertBefore($tbody.children("tr:first"));
    } else {
        $tbody.find("tr:first").insertAfter($("tr:eq(" + lastIndex + ")", $tbody))
        lastIndex = $tr.index();
        $tr.insertBefore($tbody.children("tr:first"));
    }
});

скрипка здесь http://jsfiddle.net/6F5mQ/2/

Answer 4

Лучшее, что нужно сделать, - это просто записать где-нибудь «нормальный» порядок ящиков и снова отсортировать все ящики, вместо того, чтобы пытаться поместить один ящик на старое место.