2

アンカー (一部の行に存在しないアンカー) の番号を使用して、テーブル内の行を並べ替える必要があります。テーブルの例:

<table id="sortedtable" class="full">
    <tbody>
        <tr>
            <th>Main tr</th>
        </tr>
        <tr>
            <td>
                <div style="float: left;">Title</div>
                <a class="unreadcount" href="#">7</a>
            </td>
        </tr>
        <tr>
            <td>
                <div style="float: left;">No anchor here :(</div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="float: left;">Javascripthatesme</div>
                <a class="unreadcount" href="#">15</a>
            </td>
        </tr>
        <tr>
            <td>
                <div style="float: left;">Yourox</div>
                <a class="unreadcount" href="#">2</a>
            </td>
        </tr>
        <tr>
            <td>
                <div style="float: left;">This has more than one word and no anchor</div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="float: left;">Title</div>
                <a class="unreadcount" href="#">11</a>
            </td>
        </tr>
        <tr>
            <td>
                <div style="float: left;">Big Bang Theory is not funny</div>
                <a class="unreadcount" href="#">4</a>
            </td>
        </tr>   
    </tbody>
</table>

この質問のソリューションを使用して、半作業コードを作成できました。

var $table = $('table');

var rows = $table.find('tr').get();
rows.sort(function(a, b) {
    var keyA = $(a).find('a.unreadcount').text();
    var keyB = $(b).find('a.unreadcount').text();
    if (keyA < keyB) return 1;
    if (keyA > keyB) return -1;
    return 0;
});
$.each(rows, function(index, row) {
    $table.children('tbody').append(row);
});

この jsFiddleで動作することがわかります。問題と私が助けを必要とする場所は、数字の並べ替え方法 (たとえば、32 または 12 よりも 8 が最初に来る) であり、最初の行 (「Main tr」がある場所) を無視して常に一番上に置く必要があることです。

おまけとして、テーブルを元の順序に戻すボタンを作成する指示をいただければ、すばらしいことです。

ありがとう。

4

1 に答える 1

5

適切な数値ソートのために、テキスト値を数値に変換する必要があります。変換する簡単な方法は、単項プラス演算子を使用することです。

見出し行をそのままにしておくには、ソートする配列にそれを含めないでください。これは、jQuery の.slice()メソッドを使用して簡単に行うことができます。

テーブルを元の順序に戻すボタンを追加するには、並べ替える前に配列のコピーを保持します。これは、標準のArray.slice()メソッドで行いました。

そう：

var $table = $('table');

var originalRows = $table.find('tr').slice(1).get(),
    rows = originalRows.slice(0);
rows.sort(function(a, b) {
    var keyA = +$(a).find('a.unreadcount').text();
    var keyB = +$(b).find('a.unreadcount').text();
    if (keyA < keyB) return 1;
    if (keyA > keyB) return -1;
    return 0;
});
$.each(rows, function(index, row) {
    $table.children('tbody').append(row);
});

// button that changes it back:
$("input").click(function(){
    $.each(originalRows, function(index, row) {
       $table.children('tbody').append(row);
    });
});
​

デモ: http://jsfiddle.net/hLvwz/5/

于 2012-10-28T20:21:14.443 に答える