テーブル検索で一致した文字をハイライトする方法
テーブル検索で一致した文字をハイライトする方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、検索欄へ入力した文字と一致するテーブル内の文字を黄色の背景色でハイライト表示します。検索した文字がテーブル内のどこに含まれているのかを視覚的に確認しやすくできるため、行数や項目数が多いテーブルから特定の情報を探したい場合に利用できます。
このサンプルでは、氏名・所属・役職を掲載したテーブルと検索欄を用意しています。検索欄へ「営業部」や「主任」などの文字を入力すると、テーブル内で一致した文字部分だけがハイライトされます。一致した行やセル全体を色付けするのではなく、検索した文字そのものを強調する構成です。検索欄を空にするとハイライトが解除され、元のテーブル表示へ戻ります。
文字のハイライト表示は、社員一覧、商品一覧、管理画面のデータ一覧、問い合わせ一覧など、テーブル内から特定の文字を見つけやすくしたい場面に活用できます。HTMLではテーブルの見出しやセルの内容を変更でき、CSSではテーブルの背景色、枠線、余白、見出しの色、ハイライト部分の背景色や文字色などを調整できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
| 氏名 | 所属 | 役職 |
|---|---|---|
| 山口 太郎 | 営業部 | 主任 |
| 田中 花子 | 企画部 | 課長 |
| 佐藤 健 | 開発部 | 主任 |
| 鈴木 美咲 | 総務部 | 担当 |
| 高橋 一郎 | 営業部 | 係長 |
検索欄へ「営業部」や「主任」などの文字を入力すると、テーブル内で一致した文字がハイライトされます。検索欄を空にすると元の表示へ戻ります。
コードをコピーして使おう！
<!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-text-highlight_wrap">
<!-- 検索欄 -->
<input
type="text"
class="table-search-text-highlight_input"
placeholder="検索文字を入力してください"
>
<!-- 検索対象のテーブル -->
<table class="table-search-text-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>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは検索欄と検索対象となるテーブルを作成し、氏名、所属、役職などの内容を各セルへ直接記述します。CSSでは検索欄やテーブルのデザイン、一致した文字を目立たせるハイライト表示を設定します。JavaScriptでは検索欄へ入力された文字をテーブル内から探し、一致した文字部分をハイライトします。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは検索欄とテーブルを構成するファイルです。テーブルの見出しや各セルの内容を変更できます。検索対象となる内容はtbody内のtdへ直接記述し、氏名、所属、役職など用途に合わせたデータへ変更できます。
style.cssは検索欄とテーブルのデザインを設定するファイルです。テーブルの横幅、セルの余白、枠線、見出しの背景色、偶数行の背景色などを変更できます。また、一致した文字へ適用する.table-search-text-highlight_markでは、ハイライトの背景色、文字色、太字表示を設定しています。
script.jsはテーブル内の文字を検索してハイライトする処理を記述するファイルです。検索欄へ文字を入力すると、tbody内にある各セルから一致する文字を探し、一致した部分をハイライト用のspanで囲みます。検索欄を空にするとハイライトが解除され、元のセル内容へ戻ります。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。検索欄とテーブルが表示され、検索欄へ文字を入力すると、テーブル内で一致した文字がハイライトされます。
たとえば「営業部」と入力すると、所属欄にある「営業部」の文字がハイライトされます。「主任」と入力した場合は、役職欄にある複数の「主任」がそれぞれハイライトされます。このサンプルは一致した行を絞り込む検索ではなく、一致した文字をテーブル内で見つけやすくするための表示です。検索欄の文字を削除すると、ハイライトされていない元のテーブルへ戻ります。
カスタマイズできる内容
index.htmlでは検索欄のプレースホルダー、テーブルの見出し、各セルの内容を変更できます。tbody内へtrを追加すると行を増やすことができ、各tr内へtdを記述して検索対象となる内容を追加できます。社員一覧、商品一覧、問い合わせ一覧など、用途に合わせたテーブルへ変更できます。
style.cssでは検索欄の横幅、余白、枠線、角丸、文字サイズ、テーブル全体の横幅、セルの余白、枠線、見出しや偶数行の背景色を変更できます。.table-search-text-highlight_markの背景色や文字色を変更すると、検索文字のハイライトデザインも調整できます。
数値調整
style.css
max-width:900px;
検索欄とテーブル全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:40px 20px;
ページ全体の内側余白です。40pxが上下、20pxが左右の余白です。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。
margin-bottom:16px;
検索欄の下側余白です。16pxを大きくすると検索欄とテーブルの間隔が広がり、小さくすると狭くなります。
padding:12px;
検索欄の内側余白です。値を大きくすると入力欄が大きくなり、小さくするとコンパクトになります。
border:1px solid #d1d5db;
検索欄の枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:6px;
検索欄の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:16px;
検索欄へ入力する文字のサイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
padding:12px;
テーブルの見出しセルと通常セルの内側余白です。値を大きくするとセルが広くなり、小さくすると詰まった表示になります。
border:1px solid #d1d5db;
テーブルの各セルを囲む枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
min-width:560px;
画面幅640px以下で使用するテーブルの最小横幅です。値を大きくするとテーブルの横幅を広く維持し、小さくすると狭い画面でもよりコンパクトに表示されます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。検索欄とテーブル全体にはwidth:100%とmax-width:900pxを指定しているため、利用できる画面幅に合わせて横幅が変化します。検索欄にはbox-sizing:border-box;を指定し、余白や枠線を含めても親要素の横幅からはみ出しにくい構成にしています。
640px以下ではテーブルへmin-width:560px;を指定し、列が狭くなりすぎないようにしています。表示領域よりテーブルの横幅が大きくなった場合は、overflow-x:auto;によって横方向へスクロールして各セルの内容を確認できます。
コメント