ボタンクリックでテーブルの行を追加・削除する方法
ボタンクリックでテーブルの行を追加・削除する方法を紹介します。このサンプルでは、「行を追加」と「行を削除」の2つのボタンを用意し、JavaScriptを使ってテーブルのデータ行を増減できるようにします。「行を追加」をクリックするとテーブルの一番下へ新しい行が1行追加され、「行を削除」をクリックすると一番下の行が1行削除されます。
追加する行には、テーブルの見出しにある列数と同じ数のセルを自動で作成します。そのため、3列のテーブルであれば3つのセルを持つ行が追加され、列数を変更した場合も見出しの数に合わせて新しい行を作成できます。また、データ行が1行だけになった場合はそれ以上削除しないため、操作を繰り返しても最低1行は残る仕組みです。
管理画面の商品一覧や入力項目、ECサイトの明細入力、会員サイトで複数の情報を登録する画面など、必要な件数に合わせて行を増減したい場面で利用できます。HTMLでは初期状態の行数や列数、CSSではボタンの色や余白、テーブルの横幅、セルの高さや枠線などを変更できます。テーブルが表示領域より横に広くなった場合は横スクロールできるため、スマートフォン・タブレット・PCでも内容を確認できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「行を追加」をクリックすると、テーブルの一番下へ新しい行が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-row-add-delete-button-click_wrap">
<!-- 行を追加・削除する操作ボタン -->
<div class="table-row-add-delete-button-click_actions">
<!-- 行を追加するボタン -->
<button
type="button"
class="table-row-add-delete-button-click_button table-row-add-delete-button-click_add">
行を追加
</button>
<!-- 行を削除するボタン -->
<button
type="button"
class="table-row-add-delete-button-click_button table-row-add-delete-button-click_delete">
行を削除
</button>
</div>
<!-- 行を追加・削除するテーブル -->
<table class="table-row-add-delete-button-click_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>
</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列の見出しと3つのデータ行を用意しています。見出しセルのthやデータセルのtdへ文字を記述すると、用途に合わせた内容のテーブルへ変更できます。
style.cssは操作ボタンとテーブルのデザインを設定するファイルです。テーブル全体の最大横幅、ボタン同士の間隔、ボタンの余白や角丸、背景色、セルの横幅や高さ、枠線、見出しセルや偶数行の背景色を変更できます。
script.jsはテーブルの行を追加・削除する処理を記述するファイルです。「行を追加」をクリックすると、見出し行にあるthの数を取得し、同じ数のtdを持つ新しいデータ行を作成してtbodyの一番下へ追加します。「行を削除」をクリックすると一番下のデータ行を削除し、最低1行は残します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。index.htmlから同じ階層にあるstyle.cssとscript.jsを読み込む構成です。3つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。
「行を追加」をクリックするとテーブルの一番下へ新しい行が1行追加されます。続けてクリックすると行数を増やせます。「行を削除」をクリックすると一番下のデータ行から1行ずつ削除されます。データ行が1行だけになった場合は、それ以上削除されません。
カスタマイズできる内容
index.htmlでは初期状態の行数、列数、見出しセルやデータセルの内容を変更できます。初期列数を変更する場合は、見出し行のthと各データ行のtdの数を揃えてください。JavaScriptは見出し行のthの数を取得して新しい行を作るため、「行を追加」をクリックすると現在の見出し数と同じ数のセルが追加されます。
style.cssではテーブル全体の最大横幅、「行を追加」「行を削除」ボタンの背景色、ボタン同士の間隔、余白、角丸、セルの最小横幅、高さ、枠線、見出しセルや偶数行の背景色などを変更できます。
数値調整
style.css
max-width:900px;
テーブル全体の最大横幅です。値を大きくすると広い画面で横に広く表示でき、小さくするとコンパクトになります。
gap:10px;
「行を追加」と「行を削除」のボタン同士の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
margin-bottom:16px;
操作ボタンとテーブルの間隔です。16pxを大きくすると上下の間隔が広がり、小さくすると近くなります。
padding:10px 18px;
操作ボタンの内側余白です。10pxが上下、18pxが左右の余白です。値を大きくするとボタンが大きくなり、小さくするとコンパクトになります。
border-radius:6px;
操作ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
min-width:400px;
テーブルの最小横幅です。値を大きくすると狭い画面でもテーブルの横幅を広く維持し、小さくするとよりコンパクトに表示できます。
min-width:120px;
各セルの最小横幅です。値を大きくすると1列あたりの横幅が広くなり、小さくすると狭くなります。
height:48px;
見出しセルとデータセルの高さです。値を大きくすると各行が高くなり、小さくすると低くなります。
border:1px solid #d1d5db;
各セルを囲む枠線です。1pxを大きくすると枠線が太くなり、小さくすると細くなります。
レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ表示に対応しています。テーブル全体を囲む要素にはwidth:100%とmax-width:900pxを指定しているため、利用できる表示領域に合わせて横幅が変化します。
テーブルにはmin-width:400px、各セルにはmin-width:120pxを指定しています。テーブルが表示領域より横に広くなった場合は、外側の要素に指定したoverflow-x:auto;によって横方向へスクロールできます。これにより、スマートフォン・タブレット・PCでもセルの横幅を保ちながら内容を確認できます。
コメント