JavaScriptでテーブルを検索・絞り込むフィルター機能を実装する方法

JavaScriptを使えば、検索ボックスに入力した文字列に一致する行だけを表示する「フィルターテーブル」を簡単に実装できます。本記事では、keyupイベントを活用した基本的な実装例を、完全なサンプルコードとともに解説します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    * {
        box-sizing: border-box;
    }
    .searchField {
        width: 100%;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 1px solid #ddd;
        margin-bottom: 12px;
    }
    .birthDayTable {
        border-collapse: collapse;
        width: 100%;
        font-size: 18px;
    }
    .birthDayTable th, .birthDayTable td {
        text-align: left;
        padding: 12px;
    }
    .birthDayTable tr {
        border-bottom: 4px solid #ddd;
    }
    .birthDayTable tr.header, .birthDayTable tr:hover {
        background-color: #f1f1f1;
    }
</style>
</head>
<body>
<h1>Filter table example</h1>
<input type="text" class="searchField" placeholder="Friend Name:" />
<table class="birthDayTable">
<tr class="header">
<th style="width:60%;">Friends</th>
<th style="width:40%;">Birthday Month</th>
</tr>
<tr>
<td>Shawn</td>
<td>January</td>
</tr>
<tr>
<td>Ron</td>
<td>March</td>
</tr>
<tr>
<td>Jack</td>
<td>December</td>
</tr>
<tr>
<td>Simon</td>
<td>February</td>
</tr>
<tr>
<td>Ricky</td>
<td>November</td>
</tr>
</table>
<script>
    document.querySelector(".searchField").addEventListener("keyup", searchFunction);
    function searchFunction() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.querySelector(".searchField");
        filter = input.value.toUpperCase();
        table = document.querySelector(".birthDayTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>
</body>
</html>

出力結果

上記のコードをブラウザで開くと、検索フィールドと友人の誕生月一覧テーブルが表示されます。

JavaScriptでテーブルを検索・絞り込むフィルター機能を実装する方法

検索フィールドに文字を入力すると、その入力内容に一致する行だけがリアルタイムに表示されます。

JavaScriptでテーブルを検索・絞り込むフィルター機能を実装する方法

仕組みの解説

このフィルター機能は、以下の流れで動作します。

イベント登録： document.querySelector()で検索フィールドを取得し、addEventListener("keyup")によってキー入力のたびに検索関数を実行します。
大文字小文字を無視した比較： 入力値をtoUpperCase()で大文字に変換することで、「shawn」と「Shawn」など表記の揺れがあっても正しくマッチします。
行ごとの判定： テーブルの全ての<tr>要素をループ処理し、各行の先頭セル（<td>）のテキストと入力値を照合します。
表示切替： 一致する行はdisplay: ""で表示し、一致しない行はdisplay: "none"で非表示にすることで、絞り込みを実現しています。

なお、ヘッダー行には<td>が存在しないため、if (td)のチェックによって常に表示されるようになっています。このシンプルな仕組みを応用すれば、複数列での検索や部分一致の高度なフィルタリングにも拡張可能です。

CSSとJavaScriptでクラス名に基づいてDIV要素をフィルタリングする方法

JavaScriptのclearTimeout()とclearInterval()メソッドの使い方を解説

JavaScriptでリンクを絞り込む検索フィルターメニューの作成方法
JavaScriptを使えば、検索ボックスへの入力に応じてリンクリストをリアルタイムに絞り込む「フィルタリング検索メニュー」を簡単に実装できます。この記事では、入力したキーワードに一致する項目だけを表示する機能を、実際に動くサンプルコードとともにわかりやすく解説します。実装の仕組み今回のフィルタリング機能は、次の流れで動作します。テキストボックスでkeyupイベント(キーを離した瞬間)を検知する入力値を取得し、toUpperCase()で大文字に統一して比較できるようにするリスト内のすべてのli要素を走査し、リンクのテキストに入力値が含まれるかをindexOf()で判定する一致
HTMLでキャプション（表題）付きのテーブルを作成する方法
HTMLでキャプション（表題）付きのテーブルを作成するには、<caption>タグを使用します。キャプションはテーブルの内部に配置され、<table>タグの直後に記述するのが決まりです。 <caption>タグで指定したテキストは、デフォルトではテーブルの上部中央に表示されます。表示位置を変更したい場合は、CSSの「caption-side」プロパティ（top・bottom・left・rightなど）を使って調整することも可能です。コード例以下のコードを実行すると、キャプション付きのテーブルがどのように表示されるかを確認できます。 <!DOCTY