[ jQuery ] テーブルの選択した行だけをフィルタリングして表示するサンプル

テーブルの選択した行だけをフィルタリングして表示する jQuery のサンプルです。

– サンプルページ

jQuery のコード ———————————————————————-

$(function(){
    $(“#clear”).hide();
    $(“ul.cat li a”).click(function(){
        $(“#list tr”).hide();
        $(“#list tr.”+$(this).attr(“class”)).show()
        $(“#clear”).show();
        return false;
    });
    $(“#clear”).click(function(){
        $(“tr”,”#list”).show();
        $(“#clear”).hide();
        return false;
    });
});

html のコード ———————————————————————-

<ul class="cat">
    <li><a href="#" class="cat1">あいうえお</a></li>
    <li><a href="#" class="cat2">かきくけこ</a></li>
    <li><a href="#" class="cat3">さしすせそ</a></li>
    <li id="clear"><a href="#">すべて表示</a></li>
</ul>
<table border="1" id="list">
    <tr class="cat1"><td>あいうえお</td></tr>
    <tr class="cat2"><td>かきくけこ</td></tr>
    <tr class="cat3"><td>さしすせそ</td></tr>
    <tr class="cat1"><td>あいうえお</td></tr>
    <tr class="cat2"><td>かきくけこ</td></tr>
    <tr class="cat3"><td>さしすせそ</td></tr>
</table>

以上です。 jQuery 難しい〜。