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

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

テーブルの列を追加・削除する方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、ボタンをクリックするだけでテーブルへ新しい列を追加したり、不要な列を削除したりできるサンプルを作成します。比較表や管理表などで項目数を柔軟に変更したい場合に便利な実装です。

このサンプルコードでは、「列を追加」ボタンを押すとテーブルの右端へ新しい列が追加され、「列を削除」ボタンを押すと最後の列が削除されます。JavaScriptのみで動作するため、ライブラリやサーバー側の処理は不要です。テーブル構造を動的に変更する基本的な実装方法を確認できます。

列の追加・削除機能は、商品比較表、見積書作成画面、スケジュール管理表、シフト表、アンケート集計表などで活用できます。あらかじめ列数を固定せず、必要に応じて項目を増減できるため、利用者に応じた柔軟なテーブルを作成できます。実際に動作するサンプルを確認しながら、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-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>&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-column-add-delete_wrap{
  max-width:900px;
  margin:40px auto;
  padding:20px;
}

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

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

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

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

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

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

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

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

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

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

// テーブルを取得
const tableColumnAddDeleteTable =
  document.querySelector(".table-column-add-delete_table");

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

  const rows =
    tableColumnAddDeleteTable.querySelectorAll("tr");

  rows.forEach(function(row){

    const cell =
      row.parentElement.tagName === "THEAD"
        ? document.createElement("th")
        : document.createElement("td");

    if(cell.tagName === "TH"){
      cell.innerHTML = "&nbsp;";
    }

    row.appendChild(cell);

  });

});

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

  const rows =
    tableColumnAddDeleteTable.querySelectorAll("tr");

  rows.forEach(function(row){

    if(row.children.length > 1){
      row.lastElementChild.remove();
    }

  });

});

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptを別ファイルで管理します。HTMLにテーブルと操作ボタンを配置し、CSSでテーブルのデザインを整え、JavaScriptで列の追加・削除処理を実装します。ライブラリは使用せず、ブラウザだけで動作します。

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

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