テーブルの行を追加・削除する方法【HTML/CSS/JavaScript・サンプルコード付き】

テーブルの行を追加・削除する方法

テーブルの行を追加・削除する方法を紹介します。本記事では、HTML・CSS・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-add-delete_wrap">

    <div class="table-row-add-delete_actions">
      <button type="button" class="table-row-add-delete_button table-row-add-delete_add">行を追加</button>
      <button type="button" class="table-row-add-delete_button table-row-add-delete_delete">行を削除</button>
    </div>

    <table class="table-row-add-delete_table">

      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>&nbsp;</th>
        </tr>
      </thead>

      <tbody>

        <tr>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td></td>
        </tr>

        <tr>
          <td></td>
          <td></td>
        </tr>

      </tbody>

    </table>

  </div>

  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0;
  font-family:sans-serif;
  background:#ffffff;
}

/* 幅計算を統一 */
*{
  box-sizing:border-box;
}

/* 全体エリア */
.table-row-add-delete_wrap{
  max-width:900px;
  margin:40px auto;
  padding:20px;
}

/* ボタンエリア */
.table-row-add-delete_actions{
  display:flex;
  gap:10px;
  margin-bottom:16px;
}

/* ボタン共通 */
.table-row-add-delete_button{
  padding:10px 18px;
  border:none;
  border-radius:6px;
  color:#ffffff;
  font-weight:700;
  cursor:pointer;
}

/* 追加ボタン */
.table-row-add-delete_add{
  background:#2563eb;
}

/* 削除ボタン */
.table-row-add-delete_delete{
  background:#dc2626;
}

/* テーブル */
.table-row-add-delete_table{
  width:100%;
  border-collapse:collapse;
  background:#ffffff;
}

/* セル */
.table-row-add-delete_table th,
.table-row-add-delete_table td{
  height:48px;
  border:1px solid #d1d5db;
}

/* ヘッダー */
.table-row-add-delete_table th{
  background:#2563eb;
  color:#ffffff;
  font-weight:700;
}

/* 偶数行 */
.table-row-add-delete_table tbody tr:nth-child(even){
  background:#f8fbff;
}

// 追加ボタンを取得
const tableRowAddDeleteAddButton =
  document.querySelector(".table-row-add-delete_add");

// 削除ボタンを取得
const tableRowAddDeleteDeleteButton =
  document.querySelector(".table-row-add-delete_delete");

// tbodyを取得
const tableRowAddDeleteBody =
  document.querySelector(".table-row-add-delete_table tbody");

// 追加ボタンクリック時に行を追加
tableRowAddDeleteAddButton.addEventListener("click", function(){

  const row =
    document.createElement("tr");

  row.innerHTML =
    "<td></td><td></td>";

  tableRowAddDeleteBody.appendChild(row);

});

// 削除ボタンクリック時に最後の行を削除
tableRowAddDeleteDeleteButton.addEventListener("click", function(){

  const lastRow =
    tableRowAddDeleteBody.lastElementChild;

  if(lastRow){
    lastRow.remove();
  }

});

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptを別ファイルで管理します。HTMLにテーブルとボタンを配置し、CSSで見た目を整え、JavaScriptで行の追加・削除処理を実装します。ライブラリは使用していないため、そのまま設置して利用できます。

sample/
├── index.html
├── style.css
└── script.js

3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。「行を追加」をクリックするとテーブルの末尾へ新しい行が追加され、「行を削除」をクリックすると最後の行が削除されます。JavaScriptのみで動作するため、ページを再読み込みすると追加・削除した内容は初期状態へ戻ります。