テーブルのようなアイテムの順序を変更する
-
05-07-2019 - |
質問
サッカーのテーブルを表示するためのテーブルのような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>
何か考えはありますか
解決
オブジェクトの配列があり、すべてのオブジェクトがテーブル行に対応し、すべてのオブジェクトがテーブル列に対応するプロパティを持っているとします。
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);
});
所属していません StackOverflow