jQuery：將表格行移動到第一個位置，然後移回

Question

我需要將表格行從位置移動到表格中的第一個位置，然後再次單擊舊的位置。

我有一個表格中的複選框列表。這些來自代碼背後，已經排序。如果我點擊複選框，我想將此條目移至列表的開頭。如果用戶取消選中此框或點擊另一個框，則應將其移至舊位置。

更好地理解：

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

點擊後如[ ] C：

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

點擊例如， C已經拿到了舊的位置，3已經移到了最前面。

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

我已經設法得到一個頂部的行。 但是，如何將行再移動到舊的位置？

例如與工作代碼移動到頂部：

http://jsfiddle.net/6F5mQ/

Answer 1

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

撥弄我會存儲每個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 2

做的最好的事情是隻是有框的「正常」秩序的地方，並排序所有書面而不是試圖把一個盒子放在舊的地方。

Answer 3

你可以這樣做（編輯清理代碼，並修正了一些問題），這裏http://jsfiddle.net/6F5mQ/2/

Answer 4

更新的代碼看到所有其他的例子之後，以及他們是如何做不大按預期工作，我決定做一個有效的工作。

Here's the example | With effects |代碼

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; 

然後我們定義我們將使用

​​3210

然後我們檢查它是否是被點擊第一行，並重置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);