テーブル検索で一致した文字に色を付ける方法【HTML/CSS/JavaScript・サンプルコード付き】

テーブル検索で一致した文字に色を付ける方法

テーブル検索で一致した文字に色を付ける方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、検索ボックスに入力したキーワードと一致する文字だけを色付きで表示するサンプルを作成します。行を非表示にする絞り込み検索とは違い、テーブル全体はそのまま表示した状態で、該当する文字だけを目立たせることができます。

このサンプルコードでは、検索ボックスへ文字を入力すると、テーブル内の一致した文字にリアルタイムで色が付きます。検索ボタンは使用せず、入力内容に合わせてすぐに表示が変わるため、どのセルに該当文字が含まれているかを確認しやすくなります。JavaScriptのみで動作するため、サーバー処理やライブラリは不要です。

検索文字への色付けは、社員一覧、商品一覧、顧客一覧、FAQ一覧、CSV表示テーブルなどで活用できます。検索結果だけを残すのではなく、全体の一覧を見ながら一致箇所を確認したい場合に便利です。テーブル検索の見やすさを改善したい方や、検索結果を分かりやすく表示したい方におすすめです。

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

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

デモ

氏名	所属	役職
山口太郎	営業部	主任
田中花子	企画部	課長
佐藤健	開発部	主任
鈴木美咲	総務部	担当
高橋一郎	営業部	係長

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

<!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-search-color-highlight_wrap">

    <input
      type="text"
      class="table-search-color-highlight_input"
      placeholder="検索文字を入力してください"
    >

    <table class="table-search-color-highlight_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>
      </tbody>

    </table>

  </div>

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

</body>
</html>

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

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

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

/* 検索入力欄 */
.table-search-color-highlight_input{
  width:100%;
  margin-bottom:16px;
  padding:12px;
  border:1px solid #d1d5db;
  border-radius:6px;
  font-size:16px;
}

/* テーブル */
.table-search-color-highlight_table{
  width:100%;
  border-collapse:collapse;
  background:#ffffff;
}

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

/* ヘッダー */
.table-search-color-highlight_table th{
  background:#2563eb;
  color:#ffffff;
}

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

/* 一致した文字 */
.table-search-color-highlight_mark{
  background:#facc15;
  color:#111827;
  font-weight:700;
}

// 検索入力欄を取得
const tableSearchColorHighlightInput =
  document.querySelector(".table-search-color-highlight_input");

// テーブル内のセルを取得
const tableSearchColorHighlightCells =
  document.querySelectorAll(
    ".table-search-color-highlight_table tbody td"
  );

// 元の文字を保存
const tableSearchColorHighlightOriginalTexts =
  Array.from(tableSearchColorHighlightCells).map(function(cell){
    return cell.textContent;
  });

// 入力時に一致文字を色付け
tableSearchColorHighlightInput.addEventListener("input", function(){

  const keyword =
    this.value.trim();

  tableSearchColorHighlightCells.forEach(function(cell,index){

    const originalText =
      tableSearchColorHighlightOriginalTexts[index];

    if(keyword === ""){
      cell.textContent = originalText;
      return;
    }

    const highlightedText =
      originalText.replaceAll(
        keyword,
        '<span class="table-search-color-highlight_mark">' +
        keyword +
        "</span>"
      );

    cell.innerHTML = highlightedText;

  });

});

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptを別ファイルで管理します。HTMLに検索フォームとテーブルを配置し、CSSでテーブルと一致文字の色付けデザインを設定し、JavaScriptで検索文字と一致した部分をリアルタイムに強調表示します。

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

3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。検索欄へ文字を入力すると、テーブル内の一致した文字だけに色が付きます。テーブルの行は非表示にならず、そのまま表示されるため、一覧全体を確認しながら一致箇所を探したい場合に便利です。入力内容を削除すると元の表示へ戻ります。