Question

For example, I have a code:

<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>c</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>h</td>
        <td class="sort">2</td>
    </tr>
    <tr>
        <td>p</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort"></td>
    </tr>
</table>

I want this to be sorted like this:

<table>
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>h</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>p</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort"></td>
    </tr>
</table>

I used this code:

function sortNum(a, b) {
    return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;
}
function sortTheTable(){
    $(function() {
        var elems = $.makeArray($('tr:has(.price)').remove())
        elems.sort(sortNum)
        $('table#information').append($(elems));
    });
}

this works but, the problem is, the output is like this:

<table>
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>h</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>p</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
</table>

The empty one goes to top. I want the empty ones in the bottom.

Thanks

Answer 1

Instead of

return 1 * $(a).find('.sort').text() < 1 * $(b).find('.sort').text() ? 1 : 0;

insert

return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;

http://jsfiddle.net/E56j8/