jQueryでテーブルをラジオボタンでソート（プラグインなし）

jQuery2010年12月25日

よくプラグインでテーブルをソートする機能が紹介されていますが、自分はあんまプラグインを追加するのが好きじゃないというのもあり、自作してみました。
ついでに自動でストライプ模様になるよう実装しています。

HTML

<ul class="list-sort">
<li><label for="line-all"><input type="radio" id="line-all" class="item" value="あ行" name="select" />すべて</label></li>
<li><label for="line-01"><input type="radio" id="line-01" class="item" value="あ行" name="select" />あ行</label></li>
<li><label for="line-02"><input type="radio" id="line-02" class="item" value="い行" name="select" />い行</label></li>
<li><label for="line-03"><input type="radio" id="line-03" class="item" value="う行" name="select" />う行</label></li>
</ul>
<table cellpadding="0" cellspacing="0" border="0">
<col width="25%" />
<col width="25%" />
<col width="25%" />
<col width="25%" />
<tbody>
<tr class="sort-title">
<th>タイトル1</th>
<th>タイトル2</th>
<th>タイトル3</th>
<th>タイトル4</th>
</tr>
<tr class="tgt-01">
<td>あああ</td>
<td>あああ</td>
<td>あああ</td>
<td>あああ</td>
</tr>
<tr class="tgt-02">
<td>いいい</td>
<td>いいい</td>
<td>いいい</td>
<td>いいい</td>
</tr>
<tr class="tgt-03">
<td>ううう</td>
<td>ううう</td>
<td>ううう</td>
<td>ううう</td>
</tr>
※以下省略

Javascript

$(document).ready(function() {

//ロード時にテーブルの偶数列にクラス付加／「すべて」にチェック
$("table tr:even").addClass("even");
$("ul.list-sort input:radio").attr("checked","");
$("ul.list-sort input#line-all:radio").attr("checked","checked");

//セレクタを変数に格納
var $tgt = $("input.item");

//ラジオボタンチェック時の関数
$tgt.click(function(){

//セレクタを変数に格納、末尾の数字を文字列で抜き出す
var $sortString = $(this).attr("id");
var $sortStringPath = $sortString.substring(5,7);

//いったん全てのtrを非表示
$("tr").removeClass("visible").addClass("none");
$("tr.sort-title").removeClass("none");

//対象のtrのみ表示
var $sort_tgt = "tr.tgt-" + $sortStringPath;
$($sort_tgt).removeClass("none").addClass("visible");

//全てのtrを表示
if($sortString == "line-all"){
$("tr").removeClass("none");
}

//ソートするたびに表示セルの偶数列にクラス付加
$("table tr").removeClass("even");
$("table tr:visible:even").addClass("even");

});

});

解説

まずページ読み込み時にこちらの記事でも紹介していますが、偶数列のtrにclass="even"を付加しています。
次にいったん全てのtrを非表示にします（ここでclass="even"も削除）
そしてチェックしたラジオボタンのidの末尾の番号とマッチするクラス名が付加されているtrのみにclass="visible"を付加します。
ソート後、改めて表示されている列を対象に偶数列にclass="even"を付加しなおします。
また、全てを列を表示する場合用にif文で処理を分けています。

この記事を読んでいる方にオススメの記事

「jQuery」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。