テーブルをソートする

• トップ
• How To
• テーブルをソートする

説明

DOM（Document Object Model）を用いて、ヘッダクリックによりテーブルをソートする方法を紹介します。

実例

ソース

<style>
#table1 {
  width: 200px;
  border-collapse: collapse;
}
#table1 th,
#table1 td {
  border: 1px solid gray;
}
</style>
<script>
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 id="table1">
 <thead>
  <tr>
   <th onclick="SortTable('table1', 0, 's')">名前</th>
   <th onclick="SortTable('table1', 1, 'n')">年齢</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>