JQuery сортировать строки таблицы по значению одного тд

Question

Как бы сортировать эту таблицу со стороны pts класса, который у меня есть:

<table> 
    <tr> 
     <th>rank</th> 
     <th>team</th> 
     <th>pts</th> 
    </tr> 
    <tr> 
     <td>1.</td> 
     <td>Chelsea</td> 
     <td class="pts">3</td> 
    </tr> 
    <tr> 
     <td>2.</td> 
     <td>Arsenal</td> 
     <td class="pts">1</td> 
    </tr> 
    <tr> 
     <td>3.</td> 
     <td>Man U</td> 
     <td class="pts">2</td> 
    </tr> 
</table> 

<button>SORT</button> 

код: http://jsfiddle.net/dxL8b2k0/

Answer 1

Для имеющих действительную таблицу, вы должны оберните первый tr с элементом thead и другими tr s с элементом tbody. Для сортировки tr S можно использовать sort метод:

$('tbody > tr').sort(function (a, b) { 
    return +$('td.pts', b).text() > +$('td.pts', a).text(); 
}).appendTo('tbody'); 

Для обновления ранговых клетки можно использовать text метод:

$('tbody > tr').sort(function (a, b) { 
    return +$('td.pts', b).text() > +$('td.pts', a).text(); 
}).appendTo('tbody').find('td:first').text(function(index) { 
    return ++index + '.'; 
}); 

Answer 2

Смотрите этот обновленный fiddle для рабочей версии:

$('#btnGo').on('click', function() { 
    // get rows as array and detach them from the table 
    var rows = $('#tbl tr:not(:first)').detach(); 

    // sort rows by the number in the td with class "pts" 
    rows.sort(function (row1, row2) { 
     return parseInt($(row1).find('td.pts').text()) - parseInt($(row2).find('td.pts').text()); 
    }); 

    // add each row back to the table in the sorted order (and update the rank) 
    var rank = 1; 
    rows.each(function() { 
     $(this).find('td:first').text(rank + '.'); 
     rank++; 
     $(this).appendTo('#tbl'); 
    }); 
});