テーブルをソートする

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

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)

実例
Cyndy48
Daisy24
Alice36
Ellen18
Barbara52
ソース
<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