Result
http://jsfiddle.net/kachibito/AK3TM/embedded/result,js,css,html
jQuery
$(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"); });
css
table{ width:400px; border-collapse:collapse; border-bottom:1px solid #ccc; } table th, table td{ width:25%; padding:5px 0; margin:0; text-align:center; border:1px solid #ccc; } table tr.none, table tr.none td{ visibility:hidden; display:none; } table tr.visible, table tr.visible td{ visibility:visible; } table tr.even td{ background:#efefef; } table th{ width:25%; background:#efefef; } ul{ list-style:none; overflow:hidden; zoom:1; } ul li{ float:left; padding:10px;}
html
<ul class="list-sort"> <li><label for="line-all"><input type="radio" id="line-all" class="item" value="foo" name="select" />All</label></li> <li><label for="line-01"><input type="radio" id="line-01" class="item" value="foo" name="select" />foo</label></li> <li><label for="line-02"><input type="radio" id="line-02" class="item" value="bar" name="select" />bar</label></li> <li><label for="line-03"><input type="radio" id="line-03" class="item" value="hoge" name="select" />hoge</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>Title1</th><th>Title2</th><th>Title3</th><th>Title4</th> </tr> <tr class="tgt-01"> <td>foo</td><td>foo</td><td>foo</td><td>foo</td> </tr> <tr class="tgt-02"> <td>bar</td><td>bar</td><td>bar</td><td>bar</td> </tr> <tr class="tgt-01"> <td>foo</td><td>foo</td><td>foo</td><td>foo</td> </tr> <tr class="tgt-03"><td>hoge</td> <td>hoge</td><td>hoge</td><td>hoge</td> </tr> </tbody> </table>