ポンクソフト

カラムでソートできるテーブルを自作してみる - jQuery入門

前ページ jQuery入門 TOP 次ページ

目次

  1. jQuery入門
  2. jQueryのインストール・簡単な使い方
  3. クイズゲームの作り方
  4. 秘密の暗号を作ってみよう(たぬき暗号)
  5. アクションゲームを作ってみよう(ぬりかべ)
  6. 画像を使ったジグソーパズルを作ってみよう
  7. もぐらたたきっぽいゲーム
  8. ドラッグ可能なポップアップウインドウを作ろう
  9. jQuery UI Sortableで1ラインオセロゲーム
  10. ブラウザ全体をブロックしてみる
  11. Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
  12. 発生したイベントの状態を保持・保存する6つのパターン
  13. Ajaxを利用したシンプルなイメージギャラリーを作ってみる
  14. テーブルにページ送り(ページング)を実装してみる
  15. jQuery UI Draggableを使って付箋(sticky)を作ってみる
  16. カラムでソートできるテーブルを自作してみる
  17. テーブルを使ったシンプルなドット絵エディタを作ってみる
  18. iPhoneのようにマウスではじいてスクロール(フリックスクロール)を実装してみる
  19. テキストフィールドの数値をマウスの上下移動で増減する
  20. iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
  21. iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
  22. リアルタイムプレビュー付きのHTMLエディタを作ろう
  23. 保存できる付箋を作ってみる(Cookie、localStorage)

テーブルのソートについて

やってきました車輪の再発明シリーズ。今回はテーブルのソートです。自作なんて面倒だ、という方はFlexgridが高機能です。

テーブルソートの実行結果

列名をクリックすると、昇順・降順を切り替えてソートできます。

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>テーブルのソート</title>
<script>
var tds = [
  ["メラ", "  2"],
  ["メラミ", "  6"],

・・・・・・中略・・・・・・

  ["トラマナ", "  2"]
];

$(function() {
  function draw() {
    var tag = '';
    $.each(tds, function(i, val) {
      tag += '<tr><td>'+ val[0] + '</td><td>' + val[1] + '</td></tr>';
    });
    $('tbody').html(tag);
  }
  $('th').click(function() {
    var arrow = $('span', this);
    var col = $('th').index(this);
    if (arrow.html() == '▼') {
      arrow.html('▲');
      tds.sort(function(a, b) { return a[col] < b[col] ? -1 : 1; });
    } else {
      arrow.html('▼');
      tds.sort(function(a, b) { return b[col] < a[col] ? -1 : 1; });
    }
    $(this).siblings().find('span').html('');
    draw();
  });
  draw();
});
</script>
<style>
th, td {
  border: 1px solid black;
  padding: 2px;
}
th {
  background-color: #ccc;
  cursor: pointer;
}
</style>
</head>
<body>
<table><thead><tr><th>名前<span></span></th><th>消費MP<span></span></th></tr></thead><tbody></tbody></table>
</body>
</html>

プログラムの解説

テーブルの内容はtdsという2次元配列に格納しています。

draw関数

tableタグにtds配列の中身から生成したtr, tdタグを付け加えてテーブルを生成している部分です。
$.each(tds, function(i, val) {
$.eachは配列やオブジェクトに対して使うことのできる汎用的な繰り返し関数です。配列tdsに対して要素を先頭から一つずつ取り出し関数の中身が実行されます。そのとき、インデックスがi、値がvalに代入されます。
tag += '<tr><td>'+ val[0] + '</td><td>' + val[1] + '</td></tr>';
テーブル一行分のタグを生成しています。
$('tbody').html(tag);
全ての行数分のタグを生成した後、tbodyのhtmlとして追加しています。

先頭行のクリックイベント

$('th').click(function() {
先頭行のth要素がクリックされたときに以下が実行されます。
var arrow = $('span', this);
このように書くと、this(クリックされたth要素)の子要素の中からspan要素を検索します。このspan要素の中に昇順・降順を示す矢印が入ります。
var col = $('th').index(this);
colにはクリックされたカラムが左から数えて何番目かが入ります(一番左のカラムが0、次が1。)。th要素全ての中からindex関数によってクリックされた要素が何番目かを調べています。
arrow.html('▲');
tds.sort(function(a, b) { return a[col] < b[col] ? -1 : 1; });
降順の場合の処理です。JavaScript標準のsort関数に、選択されたカラムの文字列を比較する関数を登録しています。
arrow.html('▼');
tds.sort(function(a, b) { return b[col] < a[col] ? -1 : 1; });
昇順の場合の処理です。降順の逆ですね。
$(this).siblings().find('span').html('');
クリックされた要素以外のth要素の矢印を消しています。siblings()で兄弟要素、すなわち自分以外のth要素を選択します。

注意点

今回のソート関数は手抜きなので数値の比較ができません。上記ソースでは数値の桁を揃えて誤魔化しています。本来なら配列の値が数値かどうか調べてからソートするのが良いと思います。
前ページ jQuery入門 TOP 次ページ
このエントリーをはてなブックマークに追加 そっか0

このページに関するコメントをどうぞ

お名前:



あああああ
2017/01/20 17:43

カワカワ
ああああああああ
2017/01/16 08:48

fsfさ
dふぁfだs
2017/01/05 19:56

ああ
あああ
2016/11/09 18:25

test
サンプル
2016/11/08 16:42

セレクタの指定方法を返る
HTML部分
~~~~
<div>問題1</div>
<p>
<input type="radio" name="food" value="1">そば
<input type="radio" name="food" value="2">うどん
<input type="radio" name="food" value="3">ラーメン
</p>

<div>問題2</div>
<p>
<input type="radio" name="food01" value="1">いか
<input type="radio" name="food01" value="2">たこ
<input type="radio" name="food01" value="3">えび
<input type="radio" name="food01" value="4">えび
</p>
2016/11/08 14:31

セレクタの指定方法を返る
>教えてくださいさん
セレクタの指定方法をinputからnameに変える方法はいかがでしょうか。

//問題1
$(function() {
$("*[name=food]").click(function() {
if($(this).val()==2)
{
alert('正解');
}
});
});

//問題2
$(function() {
$("*[name=food01]").click(function() {
if($(this).val()==2)
{
alert('正解');
}
});
});
2016/11/08 14:31



2016/10/31 11:32


あいうえおテスト
2016/10/25 21:43

ああああ
いいいいいい
2016/10/20 11:05

残りを読む »