ワイズリマインダー

【基本編】テーブルの並び替え(ソート)

Tablesorterを使用
※要jquery1.2.1以上

JavaScript

$(document).ready(function(){
  $('#TableName').tablesorter();
});

html

<table id="TableName"><thead>
 <tr>
  <th>都道府県</th>
  <th>人口</th>
  <th>面積</th>
  <th>人口密度</th>
 </tr>
</thead><tbody>
 <tr>
  <td>東京都</td>
  <td>13,286,735</td>
  <td>2,188.67</td>
  <td>6,070.69</td>
 </tr>
 <tr>
  <td>神奈川県</td>
  <td>9,081,742</td>
  <td>2,416.05</td>
  <td>3,758.92</td>
 </tr>
 <tr>
  <td>大阪府</td>
  <td>8,860,280</td>
  <td>1,901.42</td>
  <td>4,689.82</td>
 </tr>
</tbody></table>

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください