4

たとえば、次のコードがあります。

<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>

私はこれを次のようにソートしたいと思います：

<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>

私はこのコードを使用しました：

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));
    });
}

これは機能しますが、問題は、出力が次のようになることです。

<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>

空のものが上に移動します。一番下に空のものが欲しいです。

ありがとう

4

3 に答える 3

2

それ以外の

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

入れる

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

http://jsfiddle.net/E56j8/

于 2012-06-20T09:52:52.300 に答える
2

あなたはそれを分類するためのプラグインの数を持っていますなぜあなたは車輪の再発明をしているのですか？これがそのようなプラグインの1つです

リンク

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 

$("#myTable").tablesorter();
于 2012-06-20T09:43:27.860 に答える
0

ソートを見てください-私たちはそれを間違っています。ものをソートするための単純なjQueryプラグインはここから入手できます。

コードに関する注意事項：

// you're binding a document ready event within a function call? 
// looks the wrong way 'round, to me
function sortTheTable(){
    $(function() {
        // 1) you probably want to use .detach() over .remove()
        // 2) "tr:has(.price)" will match ALL table rows 
        // containing an element with the class .price
        // even if they're children of different <table>s!
        // 3) $('.selector') is already "an array", at least it's sortable right away.
        // there's no need for $.makeArray() here
        var elems = $.makeArray($('tr:has(.price)').remove())
        elems.sort(sortNum)
        // "#information" is a sufficient (and more efficient) selector, 
        $('table#information').append($(elems));
    });
}
于 2012-06-20T09:51:40.930 に答える