## テーブルをソートする

トップ > アラカルト > テーブルをソートする

#### ■ 説明

DOM（Document Object Model）を用いて、テーブルをソートする方法を紹介します。IE6.0（Win）、Netscape 6.1（Win）での動作を確認しています。

数値が文字列順に並ぶ（1, 200, 30, 400 の順になってしまう）不具合を修正しました。また、Netscape 7.01（Win/Linux）、Opera 7β（Win）での動作確認情報をいただきました。（2003.2.2）

#### ■ 実例

Cyndy | 48
Daisy | 24
Alice | 36
Ellen | 18
Barbara | 52

#### ■ ソース

    <script type="text/javascript">
    <!--
    var oTRs;      // TRオブジェクトリスト
    var nColId;    // ソート対象のカラムID
    var sType;     // ソート方式（n:数値、s:文字列）

    // idで指定されるテーブルの colId番目のカラムをソートする
    // typeには n（数値）か s（文字列）のいずれかを指定する
    function SortTable(id, colId, type) {
      var i, nRow, nCol;
      var oTABLE, oTBODY, oTDs;
      var aCells = new Array();
      var nRowIDs = new Array();

      // DOMをサポートしていなければ無視
      if (!document.getElementById) { return; }

      // カラム番号とソート方式を外部変数に覚えておく
      nColId = colId;
      sType = type;

      // TR要素のリストを取り出す
      oTABLE = document.getElementById(id);
      oTBODY = oTABLE.getElementsByTagName("TBODY")[0];
      oTRs = oTBODY.getElementsByTagName("TR");

      // テーブルの内容を覚えておく
      for (nRow = 0; nRow < oTRs.length; nRow++) {
        nRowIDs[nRow] = nRow;
        oTDs = oTRs[nRow].getElementsByTagName("*");
        aCells[nRow] = new Array();
        for (nCol = 0; nCol < oTDs.length; nCol++) {
          aCells[nRow][nCol] = oTDs[nCol].firstChild.nodeValue;
        }
      }

      // ソートする
      nRowIDs.sort(CompareRows);

      // 覚えていた内容をテーブルに書き戻す
      for (nRow = 0; nRow < oTRs.length; nRow++) {
        oTDs = oTRs[nRow].getElementsByTagName("*");
        for (nCol = 0; nCol < oTDs.length; nCol++) {
          oTDs[nCol].firstChild.nodeValue = aCells[nRowIDs[nRow]][nCol];
        }
      }
    }

    // テーブルソートのための比較関数
    function CompareRows(a, b) {
      var sA = oTRs[a].getElementsByTagName("*")[nColId].firstChild.nodeValue;
      var sB = oTRs[b].getElementsByTagName("*")[nColId].firstChild.nodeValue;
      if (sType == "n") {
        sA = eval(sA);
        sB = eval(sB);
      }
      if (sA == sB) {
        return 0;
      } else if (sA > sB) {
        return 1;
      } else {
        return -1;
      }
    }
    // -->
    </script>
    <table border=1 id="tb1" width=200>
     <thead>
      <tr>
       <th><button onclick="SortTable('tb1', 0, 's')">名前</button></th>
       <th><button onclick="SortTable('tb1', 1, 'n')">年齢</button></th>
      </tr>
     </thead>
     <tbody>
      <tr><td>Cyndy</td><td>48</td></tr>
      <tr><td>Daisy</td><td>24</td></tr>
      <tr><td>Alice</td><td>36</td></tr>
      <tr><td>Ellen</td><td>18</td></tr>
      <tr><td>Barbara</td><td>52</td></tr>
     </tbody>
    </table>

Copyright (C) 2002 杜甫々
初版：2002年11月10日、最終更新：2003年2月2日
http://www.tohoho-web.com/wwwxx038.htm