テーブルの列をクリックして並び替える方法【HTML/CSS/JavaScript・サンプルコード付き】

テーブル
2026.06.23

テーブルの列をクリックして並び替える方法

テーブルの列をクリックして並び替える方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、テーブルの見出しをクリックするとデータを並び替えできる機能を実装します。名前順や数値順など、利用者が見たい順番へ切り替えられるため、一覧データを扱うページの利便性を向上できます。

このサンプルコードでは、テーブルヘッダーをクリックするだけで昇順と降順を切り替えられます。特別なライブラリは使用せず、JavaScriptのみで実装しているため、既存のテーブルへも導入しやすい構成です。データ件数が増えても目的の情報を探しやすくなり、管理画面や業務システムなどでも活用できます。

テーブルの並び替え機能は、商品一覧、顧客一覧、社員一覧、売上一覧、在庫管理表など、多くのデータを表示する場面で利用されています。利用者自身が表示順を変更できるため、必要な情報を効率よく確認できるようになります。コピペで導入しやすいサンプルになっているので、実際に動作するテーブルソート機能を実装したい方や、JavaScriptによる並び替え処理を学びたい方にもおすすめです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

氏名・所属・役職・年齢の見出しをクリックすると昇順・降順で並び替えできます。
氏名 ⇅ 所属 ⇅ 役職 ⇅ 年齢 ⇅
山口 太郎 営業部 主任 34
田中 花子 企画部 課長 42
佐藤 健 開発部 エンジニア 29
鈴木 美咲 総務部 担当 26
高橋 一郎 経理部 係長 38

コードをコピーして使おう！

<!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-sort_wrap">

    <!-- 操作説明 -->
    <div class="table-column-sort_note">
      氏名・所属・役職・年齢の見出しをクリックすると昇順・降順で並び替えできます。
    </div>

    <!-- 並び替え対象のテーブル -->
    <table class="table-column-sort_table">

      <thead>
        <tr>
          <th data-column="0">
            氏名
            <span class="table-column-sort_icon">⇅</span>
          </th>

          <th data-column="1">
            所属
            <span class="table-column-sort_icon">⇅</span>
          </th>

          <th data-column="2">
            役職
            <span class="table-column-sort_icon">⇅</span>
          </th>

          <th data-column="3">
            年齢
            <span class="table-column-sort_icon">⇅</span>
          </th>
        </tr>
      </thead>

      <tbody>

        <tr>
          <td>山口 太郎</td>
          <td>営業部</td>
          <td>主任</td>
          <td>34</td>
        </tr>

        <tr>
          <td>田中 花子</td>
          <td>企画部</td>
          <td>課長</td>
          <td>42</td>
        </tr>

        <tr>
          <td>佐藤 健</td>
          <td>開発部</td>
          <td>エンジニア</td>
          <td>29</td>
        </tr>

        <tr>
          <td>鈴木 美咲</td>
          <td>総務部</td>
          <td>担当</td>
          <td>26</td>
        </tr>

        <tr>
          <td>高橋 一郎</td>
          <td>経理部</td>
          <td>係長</td>
          <td>38</td>
        </tr>

      </tbody>

    </table>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptを別ファイルで管理します。HTMLにテーブルを配置し、CSSで見た目を整え、JavaScriptで列クリックによる並び替え機能を実装します。ライブラリは使用していないため、そのまま設置して利用できます。 

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

3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。テーブルの見出し（氏名・所属・役職・年齢）をクリックすると、その列を基準に並び替えできます。文字列は五十音順、数値は数値順で並び替えられ、クリックするたびに昇順と降順が切り替わります。

コメント