ラジオボタンでテーブルの内容をフィルタリングする

Result

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>

via

jQueryでテーブルをラジオボタンでソート（プラグインなし） | 独学Webデザイナーの覚書