テーブルをソートするには

質問

テーブルをソートしたいのですが，下のリンクのスクリプトでは，<tr> に指定した onClick などの属性が失われてしまいます。属性を失わずにソートするにはどうすればいいのでしょうか。

http://okwave.jp/kotaeru.php3?qid=1818924

よろしくお願いします

回答No.4

NTJ · ベストアンサー

んっと。仮に
<table border=1 id="tb1">
としておきます。
var wk1=document.getElementById('tb1').innerHTML;
で、TABLEエレメントの中身が全部取り出せます。

そしたら、
var wk2=w1.split('<TR');
とかで配列に分解して、
var wk3=wk2.slice(2,wk2.length-2);
とかで作業用のデータを作成して、
wk3.sort(funcSt);
でソートを掛けて
var wk4=wk2.slice(0,1).concat(wk3,wk2.slice(length-1);
で連結し直して
document.getElementById('tb1').innerHTML=wk4.join('<TR');
でソート完了です。
ブラウザ自身の持っているソート機能を使うので、
恐らく「自力でソートを作る」よりはマシではないかと思います。
wk3～wk4のヤヤコシイ部分は、配列の先頭と末尾をソートしない工夫です。

あと、ソートキー関数が必要になります。
function funcSt(a,b){
var wkA=各行内容を分解し、比較目的の位置を取り出す処理(a);
var wkB=各行内容を分解し、比較目的の位置を取り出す処理(b);
return (wkA > wkB);
}
概ねコレで行けるんじゃないかな、と。
（配列の一番最初と一番最後へ入る部分をソートしない工夫が必要かもしれません。

ただ、作る前に以下のような関数を作って内容をチェックしてみてください。
alert(document.getElementById('tb1').innerHTML);
JavaScriptで処理する内容は、「作成者が作ったソースの中身」ではなく、
「ソースをブラウザが解釈した結果」になります。
そのため、IEの場合ですとエレメント名は、大文字で書いても小文字で書いても全て大文字になっています。
あとはご都合で色々と処理を変更してください。

あと、innerHTML ではなく、childNodes で的確に取り出す手もあるかもしれません。
このあたり、Document Object Modelを使い込むと、大抵はなんとかなっちゃいます。（＾＾）

回答No.3

BLUEPIXY

>onCkick などはその時に JavaScript で属性を追加しています。
だったら、そんなに難しくはないと思いますよ。
例えば、
http://okwave.jp/kotaeru.php3?qid=1189614
でのsteel_gray さんの回答のようにＴＲにonclick イベントを振り直すとかは、簡単にできると思います。（特殊事情で難しいというのであれば、見当違いなコメントかもしれませんが）
あと、元のソートのプログラムでは、列を丸ごと挿入したり削除したりして入れ替えていますけど、セルの中身をそれぞれ交換するようにすれば、エレメントの属性自体はそのままでいけると思います。

回答No.2

BLUEPIXY

#1>自動生成のテーブル
データバインドしているとかそういうことですか？
onClick なんかは、どうやって設定しているんですか？

補足

データバインディングではなく，VBScript でディレクトリの内容を取得し，JavaScript に回しています。onCkick などはその時に JavaScript で属性を追加しています。
繰り返し処理が多いので，振り直すというのは難しいです。

回答No.1

BLUEPIXY

ソートが終わった後で、属性を振り直してやればどうでしょう

補足

自動生成のテーブルなので属性はなかなか振り直せないのですが・・・。