チェックボックスでテーブルの列を表示・非表示にする方法
テーブルの列数が多いと、必要な情報だけを確認したい場合でも横方向に情報が並び、目的の項目を探しにくくなることがあります。この記事では、チェックボックスを使ってテーブルの列を表示・非表示に切り替える方法を紹介します。
サンプルでは「氏名」「所属」「役職」「電話番号」「メール」の5つのチェックボックスを用意し、それぞれのチェックを外すと対応する列を非表示にできます。再びチェックを入れると列が表示されるため、利用者が確認したい項目だけを残してテーブルを見ることができます。
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-column-show-hide-checkbox_wrap">
<!-- 表示する列を選択するチェックボックス -->
<div class="table-column-show-hide-checkbox_options">
<!-- 氏名列 -->
<label>
<input type="checkbox" data-column="0" checked>
氏名
</label>
<!-- 所属列 -->
<label>
<input type="checkbox" data-column="1" checked>
所属
</label>
<!-- 役職列 -->
<label>
<input type="checkbox" data-column="2" checked>
役職
</label>
<!-- 電話番号列 -->
<label>
<input type="checkbox" data-column="3" checked>
電話番号
</label>
<!-- メール列 -->
<label>
<input type="checkbox" data-column="4" checked>
メール
</label>
</div>
<!-- 表示・非表示を切り替えるテーブル -->
<table class="table-column-show-hide-checkbox_table">
<!-- テーブルの見出し -->
<thead>
<tr>
<th>氏名</th>
<th>所属</th>
<th>役職</th>
<th>電話番号</th>
<th>メール</th>
</tr>
</thead>
<!-- テーブルのデータ行 -->
<tbody>
<!-- 1行目 -->
<tr>
<td>山口 太郎</td>
<td>営業部</td>
<td>主任</td>
<td>090-1234-5678</td>
<td>yamaguchi@example.com</td>
</tr>
<!-- 2行目 -->
<tr>
<td>田中 花子</td>
<td>企画部</td>
<td>課長</td>
<td>080-2345-6789</td>
<td>tanaka@example.com</td>
</tr>
<!-- 3行目 -->
<tr>
<td>佐藤 健</td>
<td>開発部</td>
<td>エンジニア</td>
<td>090-3456-7890</td>
<td>sato@example.com</td>
</tr>
<!-- 4行目 -->
<tr>
<td>鈴木 美咲</td>
<td>総務部</td>
<td>担当</td>
<td>070-4567-8901</td>
<td>suzuki@example.com</td>
</tr>
<!-- 5行目 -->
<tr>
<td>高橋 一郎</td>
<td>経理部</td>
<td>係長</td>
<td>080-5678-9012</td>
<td>takahashi@example.com</td>
</tr>
</tbody>
</table>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルは、テーブルとチェックボックスを記述するHTML、デザインを設定するCSS、チェック状態に応じて列の表示・非表示を切り替えるJavaScriptの3ファイルで構成されています。3つのファイルを同じフォルダに配置して使用します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlには「氏名」「所属」「役職」「電話番号」「メール」のチェックボックスとテーブルを記述しています。各チェックボックスのdata-columnには、左端を0として対応する列番号を指定しています。style.cssではチェックボックスの配置やテーブル、セル、背景色などのデザインを設定しています。script.jsではチェック状態の変更を検知し、data-columnで指定された列の見出しセルとデータセルを表示・非表示に切り替えています。
設置方法・使い方
index.html、style.css、script.jsをsampleフォルダへ保存し、sample/index.htmlをブラウザで開きます。最初はすべての列が表示され、チェックボックスを外すと対応する列が非表示になります。再びチェックを入れると、その列が表示されます。
カスタマイズできる内容
index.htmlを編集すると、チェックボックスの項目名やテーブルの見出し、各セルの内容を変更できます。列を変更する場合は、チェックボックスのdata-columnとテーブル内の列の位置を対応させます。style.cssでは見出しの背景色、文字色、セルの余白、枠線、偶数行やマウスホバー時の背景色などを変更できます。
数値調整
テーブル全体の最大横幅はmax-widthの1000px、チェックボックス同士の間隔はgapの16px、チェックボックスとテーブルの間隔はmargin-bottomの16pxで調整できます。チェックボックスと項目名の間隔はgapの6px、テーブルの最小横幅はmin-widthの700px、セル内の余白はpaddingの12px、枠線の太さはborderの1pxで変更できます。
レスポンシブ対応
チェックボックスは横幅が足りなくなるとflex-wrapによって自動的に折り返します。テーブルには700pxの最小横幅を設定し、表示領域より横幅が大きくなった場合はテーブル全体を囲む部分で横スクロールできるようにしています。
コメント