对表格中的特定行进行排序 + 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');
  });
});

“names”tbody 中未选中行的实际位置（附加）无关紧要，因为它将被添加回来并且当前排序将被更新。