[ 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 難しい〜。

スポンサードリンク

この記事が気に入ったら、ぜひシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。