キーワード検索でテーブルの行を絞り込み表示する方法
テーブルに多くのデータが並んでいると、目的の情報を目視だけで探すのが難しくなることがあります。この記事では、検索欄へキーワードを入力すると、その文字を含むテーブルの行だけを残して絞り込み表示する方法を紹介します。
サンプルでは「氏名」「所属」「役職」の3列を持つ一覧表を用意しています。検索欄へ「営業部」と入力すると営業部を含む行だけが表示され、「主任」と入力すると主任を含む行だけが表示されます。入力した文字を削除すると、非表示になっていた行が再びすべて表示されます。
JavaScriptで検索欄への入力を検知し、各行に含まれている文字列と入力されたキーワードを比較しています。一致しない行だけを非表示にするため、検索ボタンを押さなくても入力内容に合わせてリアルタイムに表示結果が変化します。社員一覧や商品一覧、顧客一覧、管理画面など、ページ内のテーブルから目的のデータをすばやく探したい場合に利用できます。
HTMLでは検索対象となるテーブルの項目やデータを変更でき、CSSでは検索欄やテーブルの横幅、セルの余白、背景色などを調整できます。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-row-keyword-filter_box">
<!-- キーワード検索欄 -->
<input
class="table-row-keyword-filter_search"
type="text"
placeholder="氏名・所属・役職で検索できます"
>
<!-- キーワードで絞り込むテーブル -->
<table class="table-row-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>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではキーワードを入力する検索欄と、「氏名」「所属」「役職」の3列を持つテーブルを作成します。CSSでは検索欄やテーブルの横幅、セルの余白、背景色、枠線などを設定し、JavaScriptでは検索欄へ入力されたキーワードと各データ行の文字列を比較して、一致する行だけを表示します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは検索欄とテーブルを構成するファイルです。検索欄のプレースホルダー、テーブルの見出し、氏名・所属・役職などのデータを変更できます。検索対象となるデータはtbody内の各行へ直接記述します。
style.cssは検索欄とテーブルのデザインを設定するファイルです。全体の横幅、検索欄の余白や角丸、見出しセルの背景色、データ行の背景色、セルの余白や枠線などを変更できます。
script.jsはキーワード検索による絞り込みを行うファイルです。検索欄へ文字が入力されるたびにtbody内の各行を確認し、その行に入力したキーワードが含まれていれば表示し、含まれていなければ非表示にします。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存し、index.htmlからstyle.cssとscript.jsを読み込んだ状態でsample/index.htmlをブラウザで開いてください。検索欄へ「営業部」「主任」「山口」などの文字を入力すると、そのキーワードを含むデータ行だけに絞り込まれます。検索欄を空に戻すと、すべてのデータ行が表示されます。
カスタマイズできる内容
index.htmlでは検索欄のプレースホルダー、テーブルの見出し、各行に表示するデータを変更できます。JavaScriptはtbody内の1行分の文字列全体を検索するため、「氏名」「所属」「役職」のどの列にキーワードが含まれていても一致する行として表示されます。style.cssでは検索欄やテーブルの横幅、背景色、文字色、セルの余白、枠線などを変更できます。
数値調整
style.css
max-width:900px;
検索欄とテーブル全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin-bottom:16px;
検索欄とテーブルの間隔です。16pxを大きくすると間隔が広がり、小さくすると近くなります。
padding:12px;
検索欄の内側余白です。値を大きくすると文字と枠線の間隔が広がります。同じ12pxがテーブルの見出しセルと通常セルの内側余白にも設定されており、こちらを変更するとセル内の余白を調整できます。
border:1px solid #d1d5db;
検索欄とテーブルセルの枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:8px;
検索欄の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:16px;
検索欄へ入力する文字のサイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
min-width:500px;
テーブルの最小横幅です。値を大きくするとテーブルの横幅を広く維持し、小さくすると狭い画面でもより小さく表示できるようになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:900pxにより、検索欄とテーブルを囲む領域が画面幅に合わせて縮小されます。テーブルにはmin-width:500px;を設定し、外側の要素にはoverflow-x:auto;を指定しているため、表示領域がテーブルの最小横幅より狭くなった場合は横スクロールして内容を確認できます。スマートフォン・タブレット・PCで画面幅に合わせて利用できます。
コメント