jQuery - 添加一行后对表进行排序

Question

我有 2 个表，一个表有 2 列，另一个表有 1 列。当您单击一行时，该行将从表中删除，并且新的 TR 将添加到相反表的末尾。现在我想按字母顺序排序。

像 tablesorter 这样的 jQuery 插件对于我想做的事情来说完全是多余的。有没有一种简单的方法可以对表格进行排序？

编辑:Fiddle

Answer 1

这里有一个简单的表排序器，其中包含 Fiddle demo here :

HTML

<table id="sort-table">
    <tbody>
        <tr><td>he</td></tr>
        <tr><td>stackoverflow</td></tr>
        <tr><td>by</td></tr>
        <tr><td>vote</td></tr>
        <tr><td>post</td></tr>
        <tr><td>And</td></tr>
        <tr><td>clicking</td></tr>
        <tr><td>up</td></tr>
        <tr><td>did</td></tr>
    </tbody>
</table>
<br>
<button class="sort-table asc">sort ASC</button>
<button class="sort-table desc">sort DESC</button>

JQUERY

$('.sort-table').click(function(e) {
    e.preventDefault();                    // prevent default behaviour

    var sortAsc = $(this).hasClass('asc'), // ASC or DESC sorting
        $table  = $('#sort-table'),        // cache the target table DOM element
        $rows   = $('tbody > tr', $table); // cache rows from target table body

    $rows.sort(function(a, b) {

        var keyA = $('td',a).text();
        var keyB = $('td',b).text();

        if (sortAsc) {
            return (keyA > keyB) ? 1 : 0;  // A bigger than B, sorting ascending
        } else {
            return (keyA < keyB) ? 1 : 0;  // B bigger than A, sorting descending
        }
    });

    $rows.each(function(index, row){
      $table.append(row);                  // append rows after sort
    });
});