JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでHTMLテーブルを並べ替える方法をわかりやすく解説

Webページ上の表（HTMLテーブル）を、ボタン操作ひとつで名前順に並べ替えられたら便利ですよね。JavaScriptを使えば、ページを再読み込みすることなくテーブルの行を動的に入れ替えることができます。

この記事では、テーブル内のデータをアルファベット順にソートする基本的な方法を、そのまま動作する完全なサンプルコードとともに解説します。

テーブル並べ替えの基本の流れ

JavaScriptでテーブルをソートする際の基本的な手順は以下のとおりです。

  • テーブルの取得： document.querySelector() を使って、並べ替え対象のテーブル要素を取得します。
  • 行の比較： テーブルの全行（rowsコレクション）をループで回し、隣り合う2行のセル内容を比較します。
  • 行の入れ替え： 順序が正しくない場合、insertBefore() メソッドで行の位置を入れ替えます。
  • 繰り返し処理： 入れ替えが一切発生しなくなるまで、この処理を繰り返します。

これは古典的なソートアルゴリズム「バブルソート」の考え方を、DOM操作に応用したものです。

サンプルコード

以下は、ボタンをクリックするとテーブルが名前のアルファベット順に並べ替えられる完全なHTMLファイルです。そのままコピーして保存すれば、すぐに動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
    button {
        padding: 10px;
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: bold;
    }
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    table {
        border-spacing: 0;
        width: 100%;
        border: 1px solid #ddd;
    }
    th, td {
        border-top: 1px solid black;
        text-align: left;
        padding: 16px;
    }
</style>
</head>
<body>
<h1>Sorting table example</h1>
<button onclick="sortTable()">Sort</button>
<table class="filterTable">
<tr>
<th>Name</th>
<th>BirthDay Month</th>
</tr>
<tr>
<td>Ron</td>
<td>January</td>
</tr>
<tr>
<td>Shawn</td>
<td>April</td>
</tr>
<tr>
<td>Caleb</td>
<td>December</td>
</tr>
<tr>
<td>Bruno</td>
<td>February</td>
</tr>
<tr>
<td>Jack</td>
<td>October</td>
</tr>
<tr>
<td>Max</td>
<td>November</td>
</tr>
</table>
<script>
    function sortTable() {
        var filterTable, rows, sorted, i, x, y, sortFlag;
        filterTable = document.querySelector(".filterTable");
        sorted = true;
        while (sorted) {
            sorted = false;
            rows = filterTable.rows;
            for (i = 1; i < rows.length - 1; i++) {
                sortFlag = false;
                x = rows[i].getElementsByTagName("TD")[0];
                y = rows[i + 1].getElementsByTagName("TD")[0];
                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                    sortFlag = true;
                    break;
                }
            }
            if (sortFlag) {
                rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                sorted = true;
            }
        }
    }
</script>
</body>
</html>

sortTable() 関数の処理の流れ

  1. querySelector(".filterTable") でテーブルを取得し、継続判定用のフラグ sorted を true に設定します。
  2. while ループの中で、先頭の見出し行を除いた各行について、現在の行 x と次の行 y の1列目（名前）を比較します。
  3. 比較の際に toLowerCase() で小文字に統一しているため、大文字・小文字の違いに影響されずにソートできます。
  4. 順序が不正な場合は break でループを抜け、insertBefore() によって2つの行を入れ替えます。
  5. 入れ替えが起きなくなるまで処理を繰り返し、テーブル全体が昇順に整列された時点で終了します。

カスタマイズのヒント

このコードは少しの変更でさまざまな用途に応用できます。比較条件の不等号を逆にすれば降順（Z→A）ソートになり、参照するセルのインデックスを [0] から [1] に変えれば誕生月の列を基準にソートできます。数値データを扱う場合は、parseInt() や parseFloat() で値を数値化してから比較すると正確です。

実行結果

上記のコードをブラウザで開くと、最初は登録順にテーブルが表示されます。

JavaScriptでHTMLテーブルを並べ替える方法をわかりやすく解説

Sort ボタンをクリックすると、名前がアルファベット順（Bruno → Caleb → Jack → Max → Ron → Shawn の順）に並べ替えられます。

JavaScriptでHTMLテーブルを並べ替える方法をわかりやすく解説


このように、JavaScriptのDOM操作を組み合わせるだけで、少ないコード量でインタラクティブなテーブルソート機能を実装できます。ぜひご自身のプロジェクトにも応用してみてください。

  1. HTMLでテーブルの列を結合する方法｜colspan属性の使い方を解説

    HTMLでテーブルの列を結合（マージ）するには、<td>タグにcolspan属性を使用します。この属性を指定することで、隣接するセル同士を横方向にまとめることができます。 例えば、4行4列のテーブルがある場合でも、colspan属性を使えば、2つや3つのセルを簡単に結合できます。 例1：基本となるテーブルを作成する まずは、colspan属性を使う前の状態として、3行3列のシンプルなテーブルをHTMLで作成してみましょう。 <!DOCTYPE html> <html>    <head>     &nbs

  2. HTMLでテーブルのセルを結合する方法：colspanとrowspanの使い方

    HTMLでテーブルのセルを結合するには、colspan属性とrowspan属性を使用します。それぞれの役割は以下の通りです。rowspan属性：セルが縦方向（行）にまたがる行数を指定しますcolspan属性：セルが横方向（列）にまたがる列数を指定しますどちらの属性も<td>タグ内に記述し、値は数値で指定します。例えば、rowspan=2と指定すれば2行分、colspan=2と指定すれば2列分のセルが結合されます。例1：通常のテーブルを作成するまず、HTMLで3行×3列のシンプルなテーブルを作成してみましょう。<!DOCTYPE html> <html> &n