排序表中的特定行+ HTML + jQuery

Question

我有一個要求只對表中的特定行進行排序。我使用tablesorter插件來做排序（http://mottie.github.io/tablesorter/js/jquery.tablesorter.js）

我在jsbin中編碼的例子。

http://jsbin.com/igijer/1/edit

這裏作爲和當用戶選擇一個複選框，相應的行被預設於表的頂部。 當選中的複選框未選中時，相應的行將被追加到表格中。

現在，未選擇的行不會被排序。我的要求是，無論何時複選框未被選中並且行被附加到表中，單獨的未選定行都必須按字母順序排序。

Answer 1

這應該爲你工作（demo）：

<table id="ex" class="tablesorter"> 
    <thead> 
    <th class="sorter-false"></th> 
    <th>Name</th> 
    <th>Contribution</th> 
    </thead> 
    <!-- add an "info" only (non-sorting) tbody --> 
    <tbody class="tablesorter-infoOnly"></tbody> 

    <tbody class="names"> 
    <tr> 
     <td><input type="checkbox" /></td> 
     <td>Warren Buffet</td> 
     <td>business</td> 
    </tr> 
    <!-- etc --> 
    </tbody> 
</table> 

代碼

$(function() { 

    $("#ex").tablesorter({ sortList: [[0,0], [1,0]] }); 

    $('#ex').on('click', 'input:checkbox', function() { 
    var $this = $(this); 
    if ($this.is(':checked')) { 
     $this.closest('tr').prependTo("#ex .tablesorter-infoOnly"); 
    } else { 
     $this.closest('tr').appendTo("#ex .names"); 
    } 
    $this.trigger('update'); 
    }); 
}); 

在 「名稱」 中選中行的實際位置（追加）TBODY並不重要，因爲它將被添加回來，當前的排序會被更新。