对表格中的特定行进行排序+ HTML + jQuery [英] Sorting specific rows in a table + HTML + jQuery

问题描述

我需要只对表中的特定行进行排序。使用tablesorter插件进行排序（ http://mottie.github.io/tablesorter） /js/jquery.tablesorter.js ）

I have an requirement to sort only specific rows in a table. Am using tablesorter plugin to do sorting (http://mottie.github.io/tablesorter/js/jquery.tablesorter.js)

我在jsbin中编写了这个例子。

The example i have coded here in jsbin.

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

在这里，当用户选择一个复选框时，相应的行将被添加到表格的顶部。
当选中的复选框未选中时，相应的行将附加到表中。

Here as and when a user selects a checkbox, the corresponding row is prepended to the top of the table. And when the selected checkbox is unchecked, the corresponding row is appended to the table.

现在，未选择的行不排序。我的要求是，每当复选框被取消选择，并且行被附加到表，单独的未选择的行必须按字母顺序排序。

Now, the unselected rows are not sorted. My requirement is that whenever the checkbox is unselected and the row gets appended to the table, the unselected rows alone must be sorted alphabetically.

推荐答案

这应该对你有用（ 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');
  });
});

namestbody中未被选中的行的实际位置它将被添加回来，并且当前的排序将被更新。

The actual position (appending) of the unchecked row in the "names" tbody doesn't matter because it will be added back and the current sort would be updated.

这篇关于对表格中的特定行进行排序+ HTML + jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！