jQuery – 在添加一行后对表进行排序

前端之家收集整理的这篇文章主要介绍了jQuery – 在添加一行后对表进行排序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有2个表,一个表有2列,另一个表有1列.当您单击一行时,该行将从表中删除,并将新的TR添加到对方表的末尾.现在我想按字母排序.

jQuery插件(如tablesorter)对于我想要做的是完全超额的.有没有一个简单的方法我可以排序表?

编辑:Fiddle

解决方法

在这里你有一个简单的表格分拣机与 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
    });
});

猜你在找的jQuery相关文章