テーブルのようなアイテムの順序を変更する

Question

サッカーのテーブルを表示するためのテーブルのようなdivのセット（行と列）があります。ここで、ページを更新せずにajaxを使用せずに、選択したキーに従ってそのテーブルを順序付けできるようにする必要があります。

より具体的には、各「列」内の値をキャッチする必要があります。選択したキーを参照し、テーブルを並べ替えます。

jQueryを使用しているため、チームのIDと原因の列を使用して配列を並べ替える方法がわからないだけで、作業はかなり簡単です。ちなみに、テーブルの値はすべて数値です。

以下はマークアップ（行）の例です：

<div class="rb">
        <div class="cname">Benfica</div>
        <div class="tdr bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold">0</div>
</div>

何か考えはありますか

Answer 1

オブジェクトの配列があり、すべてのオブジェクトがテーブル行に対応し、すべてのオブジェクトがテーブル列に対応するプロパティを持っているとします。

var table = [
   { rowId: 1, teamName: 'Man U', country: 'England' },
   { rowId: 2, teamName: 'FC Barcelona', country: 'Spain' }
];

今、データをこのように配置したら、 drawTable（table）と言うことができる関数を作成し、必要なHTMLマークアップを作成できます。次のように、その変数でソートを実行できます。

function sortTable(table, column) {
    table.sort(function(x,y) { return x[column] > y[column]; });
    return table;
}

$('#sortByTeamName').click(function() {
   table = sortTable(table, 'teamName');
   drawTable(table);
});