キーワード検索でテーブルを絞り込み表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

キーワード検索でテーブルを絞り込み表示する方法

キーワード検索でテーブルを絞り込み表示する方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、入力したキーワードに一致する行だけを表示するシンプルなテーブル検索機能を実装します。商品一覧や会員一覧などのデータ量が増えてくると、目的の情報を探すのに時間がかかることがありますが、検索機能を追加することで必要な情報へ素早くアクセスできるようになります。

このサンプルコードでは、検索ボックスへ文字を入力するとリアルタイムでテーブルを絞り込み表示します。ページの再読み込みや検索ボタンは不要で、入力内容に応じて一致しない行を自動的に非表示にします。JavaScriptのみで実装しているため、サーバー処理を用意しなくても手軽に導入できます。既存のテーブルへ追加しやすい構成になっているため、管理画面や社内ツールなどにも活用できます。

テーブル検索機能は、商品一覧、会員一覧、顧客管理表、在庫一覧、売上一覧など、多くのデータを扱う場面で役立ちます。検索条件に一致する行だけを表示するため、目的のデータを探しやすくなり、操作性の向上にもつながります。コピペで導入しやすいサンプルなので、テーブルの絞り込み検索を実装したい方や、実際に動作するサンプルを参考にしながら学習したい方にもおすすめです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

氏名	所属	役職
山口太郎	営業部	主任
山口花子	総務部	担当
田中一郎	営業部	課長
田中美咲	経理部	担当
佐藤健	開発部	リーダー
佐藤愛	営業部	担当
鈴木誠	総務部	係長
鈴木奈々	開発部	担当
高橋翔	経理部	主任
高橋優	営業部	担当
伊藤大輔	開発部	課長
伊藤彩	総務部	主任
渡辺亮	営業部	係長
渡辺真由	経理部	担当
中村拓也	開発部	主任
中村由美	総務部	課長
小林直樹	営業部	担当
小林香織	経理部	係長
加藤俊介	開発部	担当
加藤恵	総務部	リーダー

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>キーワード検索でテーブルを絞り込み表示する方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 検索エリア全体 -->
  <div class="table-keyword-filter_wrap">

    <!-- キーワード入力欄 -->
    <input
      type="text"
      id="table-keyword-filter_input"
      class="table-keyword-filter_input"
      placeholder="氏名・所属・役職で検索できます"
    >

    <!-- 検索対象テーブル -->
    <table class="table-keyword-filter_table">

      <thead>
        <tr>
          <th>氏名</th>
          <th>所属</th>
          <th>役職</th>
        </tr>
      </thead>

      <tbody>

        <tr><td>山口 太郎</td><td>営業部</td><td>主任</td></tr>
        <tr><td>山口 花子</td><td>総務部</td><td>担当</td></tr>
        <tr><td>田中 一郎</td><td>営業部</td><td>課長</td></tr>
        <tr><td>田中 美咲</td><td>経理部</td><td>担当</td></tr>
        <tr><td>佐藤 健</td><td>開発部</td><td>リーダー</td></tr>
        <tr><td>佐藤 愛</td><td>営業部</td><td>担当</td></tr>
        <tr><td>鈴木 誠</td><td>総務部</td><td>係長</td></tr>
        <tr><td>鈴木 奈々</td><td>開発部</td><td>担当</td></tr>
        <tr><td>高橋 翔</td><td>経理部</td><td>主任</td></tr>
        <tr><td>高橋 優</td><td>営業部</td><td>担当</td></tr>
        <tr><td>伊藤 大輔</td><td>開発部</td><td>課長</td></tr>
        <tr><td>伊藤 彩</td><td>総務部</td><td>主任</td></tr>
        <tr><td>渡辺 亮</td><td>営業部</td><td>係長</td></tr>
        <tr><td>渡辺 真由</td><td>経理部</td><td>担当</td></tr>
        <tr><td>中村 拓也</td><td>開発部</td><td>主任</td></tr>
        <tr><td>中村 由美</td><td>総務部</td><td>課長</td></tr>
        <tr><td>小林 直樹</td><td>営業部</td><td>担当</td></tr>
        <tr><td>小林 香織</td><td>経理部</td><td>係長</td></tr>
        <tr><td>加藤 俊介</td><td>開発部</td><td>担当</td></tr>
        <tr><td>加藤 恵</td><td>総務部</td><td>リーダー</td></tr>

      </tbody>

    </table>

  </div>

  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0;
  font-family:sans-serif;
  background:#ffffff;
}

/* 幅計算を統一 */
*{
  box-sizing:border-box;
}

/* 全体エリア */
.table-keyword-filter_wrap{
  max-width:900px;
  margin:40px auto;
  padding:20px;
}

/* 検索ボックス */
.table-keyword-filter_input{
  width:100%;
  padding:12px;
  margin-bottom:16px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size:16px;
}

/* テーブル */
.table-keyword-filter_table{
  width:100%;
  border-collapse:collapse;
}

/* セル */
.table-keyword-filter_table th,
.table-keyword-filter_table td{
  padding:12px;
  border:1px solid #d1d5db;
  text-align:left;
}

/* ヘッダー */
.table-keyword-filter_table th{
  background:#2563eb;
  color:#ffffff;
  font-weight:700;
}

/* 奇数行 */
.table-keyword-filter_table tbody tr:nth-child(odd){
  background:#ffffff;
}

/* 偶数行 */
.table-keyword-filter_table tbody tr:nth-child(even){
  background:#f8fbff;
}

/* ホバー */
.table-keyword-filter_table tbody tr:hover{
  background:#dbeafe;
}

/* 非表示行 */
.table-keyword-filter_hidden{
  display:none;
}

// 検索ボックスを取得
const tableKeywordFilterInput = document.getElementById(
  "table-keyword-filter_input"
);

// テーブル行を取得
const tableKeywordFilterRows = document.querySelectorAll(
  ".table-keyword-filter_table tbody tr"
);

// 入力時に絞り込みを実行
tableKeywordFilterInput.addEventListener("input", function(){

  const keyword = this.value.toLowerCase();

  tableKeywordFilterRows.forEach(function(row){

    const rowText = row.textContent.toLowerCase();

    if(rowText.includes(keyword)){

      row.classList.remove("table-keyword-filter_hidden");

    }else{

      row.classList.add("table-keyword-filter_hidden");

    }

  });

});

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptをそれぞれ別ファイルで管理します。HTMLに検索フォームとテーブルを配置し、CSSでデザインを整え、JavaScriptでキーワードによる絞り込み処理を実装します。

sample/
├── index.html
├── style.css
└── script.js

3つのファイルを同じフォルダへ配置してください。ブラウザで index.html を開くと、検索ボックスへ入力したキーワードに応じてテーブルがリアルタイムで絞り込み表示されます。検索対象を増やしたい場合は、HTML内の <tbody> にある行を追加してください。氏名・所属・役職のいずれかに一致するキーワードを入力すると、該当する行だけが表示されます。