tableソートJS

Tuesday, Aug 15, 2006 - 02:04 +09:00

仕事にて、tableをソートするJavascriptを作ることになったわけですが... たまたま拾ったサンプルがバリバリのDOMだったおかげで、「Javascriptにおけるオブジェクト指向」がちょっとずつ解ってきました。それはともかく。

おっかなびっくり組んでみると、なんだかんだで、とりあえず動きはするんですが... どうにもappendChild()でノードが追加されるというよりは置換されてるっぽい理屈に確信が持てません。「そういうプロパティなんだ」と言われれば、それまでなんですが。

ソースは以下

HTML
<table border="1" width="580" cellspacing="0" >
  <tbody>
    <tr>
    <th onClick="sortRow(this,0);">グループ名</th>
    <th onClick="sortRow(this,1);">今日</th>
    <th onClick="sortRow(this,2);">昨日</th>
    <th onClick="sortRow(this,3);">今週</th>
    <th onClick="sortRow(this,4);">先週</th>
    </tr>
    <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
    <td>400</td>
    <td>500</td>
    </tr>
    <tr>
    <td>200</td>
    <td>300</td>
    <td>400</td>
    <td>500</td>
    <td>600</td>
    </tr>
    ...
  </tbody>
</table>
Script
var last_sort;

function sortRow(th,idx) {

    // tbodyを特定する
    var sec = th.parentNode.parentNode;

    // trを特定する
    var rows = sec.rows;
    var N = rows.length - 1;

    // 配列xを宣言
    var x = new Array;

    // 一時領域を定義
    var marker = document.createElement('tbody');

    // tdの値を配列xに格納。行番号を揃えた変数を用意する
    for(var i=0; i<N; ++i) {
        x[i] = Object(rows[i+1].cells[idx].firstChild.nodeValue);
        x[i].row = rows[i+1];
    }

    // 配列xをソート
    x.sort();

    // 配列を逆順にする
    if(last_sort == idx) {
        x.reverse();
        idx = -idx;
    }

    // secをmarkerにする
    sec.parentNode.replaceChild(marker,sec);

    // secにtrを追加する
    for(var i=0; i<N; ++i) {
        sec.appendChild(x[i].row);
    }

    // markerをsecにする
    marker.parentNode.replaceChild(sec,marker);

    // ソート情報を保存
    last_sort = idx;

}

今後の課題

要するにサンプルコピったは良いけど、イマイチ改造できないと。なんとなく手ごたえはあるんだけど、あと一歩のところで脳がJSモードに入ってないなぁ（汗

cf. Mata's Homepage, JavaScript テーブルソート

posted in Javascript Trackback (0)

Trackback

このエントリーのトラックバックURL
http://rospear.info/other/mt-tb.cgi/205

« Previous Entry - Next Entry »