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

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

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

動作サンプル

https://codepen.io/darucub/pen/bNpearW

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><a href="#">すべて表示</a></li>
</ul>
<table border="1">
    <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 難しい〜。

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。