Question

Suppose I have the code like this:

<table>
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>a</td>
        <td class="sort">5</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">3</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">2</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
</table>

but it should be arranged this way:

<table>
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">2</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">3</td>
    </tr>
    <tr>
        <td>a</td>
        <td class="sort">5</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
</table>

Arranging the table data in basis of table data.
note: the class will be defined class="sort"

Thanks in advance

UPDATE:

I want the table to be arranged without any click of user.

Answer 1

By converting rows to an array using $.makeArray you can use natve javascript sort() on the array. I sorted numerical since it seemed applicable

DEMO: http://jsfiddle.net/3MBPF/

function sortNum(a, b) {
   return 1 * $(a).find('.sort').text() < 1 * $(b).find('.sort').text() ? 0 : 1;
}

$(function() {
    var elems = $.makeArray($('tr:has(.sort)').remove())
    elems.sort(sortNum)
    $('table').append($(elems));
});