ボタンクリックでテーブルの列を追加・削除する方法
テーブルを使った画面では、入力する内容や表示したい情報に合わせて、利用者が列を追加したり不要な列を削除したりできるようにしたい場合があります。このサンプルでは、「列を追加」ボタンと「列を削除」ボタンを用意し、ボタンをクリックするだけでテーブルの列数を変更できるようにします。
「列を追加」をクリックすると、現在のテーブルの右端へ新しい列が1列追加されます。「列を削除」をクリックすると、右端の列が1列削除されます。見出し行と各データ行をまとめて変更するため、列を追加・削除してもテーブル全体の列数を揃えた状態で操作できます。また、列がすべて削除されないように最低1列は残す仕組みにしています。
管理画面で入力項目を増やしたい場合や、比較表の項目数を利用者が変更できるようにしたい場合など、固定されたテーブルではなく操作に応じて列数を変更したい場面で利用できます。HTMLで基本となるテーブルを作成し、CSSでボタンやテーブルを整え、JavaScriptで列を追加・削除する処理を実装します。
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「列を追加」をクリックすると、テーブルの右端へ新しい列が1列追加されます。続けてクリックすると、そのたびに列を追加できます。「列を削除」をクリックすると右端の列から1列ずつ削除されます。列が1列だけになった状態では、それ以上削除されません。
コードをコピーして使おう！
<!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-add-delete_wrap">
<!-- 列を追加・削除する操作ボタン -->
<div class="table-column-add-delete_actions">
<!-- 列を追加するボタン -->
<button
type="button"
class="table-column-add-delete_button table-column-add-delete_add">
列を追加
</button>
<!-- 列を削除するボタン -->
<button
type="button"
class="table-column-add-delete_button table-column-add-delete_delete">
列を削除
</button>
</div>
<!-- 列を追加・削除するテーブル -->
<table class="table-column-add-delete_table">
<!-- テーブルの見出し -->
<thead>
<tr>
<th> </th>
<th> </th>
</tr>
</thead>
<!-- テーブルのデータ行 -->
<tbody>
<!-- 1行目 -->
<tr>
<td></td>
<td></td>
</tr>
<!-- 2行目 -->
<tr>
<td></td>
<td></td>
</tr>
<!-- 3行目 -->
<tr>
<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は操作ボタンとテーブルを構成するファイルです。初期状態では見出し行と3つのデータ行があり、それぞれ2列で構成されています。必要に応じてtrを追加・削除することで、テーブルの行数を変更できます。
style.cssはボタンとテーブルのデザインを設定するファイルです。テーブル全体の横幅、ボタン同士の間隔、ボタンの余白や角丸、セルの横幅や高さ、枠線、見出しの背景色などを変更できます。
script.jsはテーブルの列を追加・削除する処理を記述するファイルです。「列を追加」をクリックすると、見出し行にはth、通常のデータ行にはtdを作成し、それぞれの行の右端へ新しいセルを追加します。「列を削除」をクリックすると各行の右端にあるセルを削除します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「列を追加」「列を削除」の2つのボタンとテーブルが表示されます。
「列を追加」をクリックするたびに、テーブルの右端へ新しい列が1列追加されます。「列を削除」をクリックすると、右端の列が1列ずつ削除されます。列が1列になった状態では削除処理を行わないため、最低1列は残ります。
カスタマイズできる内容
index.htmlでは初期状態の列数や行数を変更できます。見出し行のthと各データ行のtdを同じ数にすることで、初期表示する列数を変更できます。tbody内のtrを追加すると行数を増やすこともできます。また、空のセルへ見出し名やデータを記述して、用途に合わせたテーブルへ変更できます。
style.cssではテーブル全体の最大横幅、ボタンの間隔、ボタンの余白、角丸、背景色、セルの横幅、高さ、枠線などを変更できます。「列を追加」と「列を削除」の背景色もそれぞれ変更できます。
数値調整
style.css
max-width:900px;
テーブル全体の最大横幅です。値を大きくすると広い画面でテーブルをより大きく表示でき、小さくするとコンパクトになります。
gap:10px;
「列を追加」と「列を削除」のボタン同士の間隔です。値を大きくするとボタンの間隔が広がり、小さくすると狭くなります。
margin-bottom:16px;
操作ボタンとテーブルの間隔です。値を大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:10px 18px;
操作ボタンの内側余白です。10pxが上下、18pxが左右の余白です。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。
border-radius:6px;
操作ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
min-width:400px;
テーブル全体の最小横幅です。値を大きくすると狭い画面でもテーブルの横幅を広く維持し、小さくするとよりコンパクトに表示できます。
min-width:120px;
各セルの最小横幅です。値を大きくすると1列あたりの横幅が広くなり、小さくすると狭くなります。
height:48px;
見出しセルと通常セルの高さです。値を大きくするとセルが高くなり、小さくすると低くなります。
border:1px solid #d1d5db;
各セルを囲む枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
レスポンシブ対応
このサンプルではテーブル全体を囲む要素にoverflow-x:auto;を指定しています。列を追加してテーブルが表示領域より横に広くなった場合は、横方向へスクロールして追加した列を確認できます。
テーブルにはwidth:100%とmin-width:400px、各セルにはmin-width:120pxを指定しています。画面幅が狭い場合や列数を増やした場合でも、セルが極端に狭くなることを防ぎながら表示できます。
コメント