人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

テーブルをソートするjavascriptについての質問です。

テーブルをソートするスクリプトはたくさんあるのですが、ajaxで<div id='result'></div>の中に読み込んだテーブルをソートする方法はありますか?

jsonで受け取ってクライアント側で処理をするのではなく、テーブルごと受け取ったデータをソートしたいのです。
簡単に出来る場合はその方法を、難しい場合はその旨を教えていただけると助かります。

●質問者: southgate_01
●カテゴリ:インターネット ウェブ制作
✍キーワード:Ajax JavaScript JSON クライアント スクリプト
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● tsukasa57
●80ポイント

コメントで教えて頂いたレベルのテーブルであれば、並び替える方法はたくさんあります。

もし table タグに id を付与できるのであれば

http://tablesorter.com/docs/http://www.skuare.net/2007/10/javascripttablesort.html

で解説されているライブラリを使うと簡単にできそうです。

他にも http://neil.fraser.name/software/tablesort/ なども使えます。

ライブラリを使わず自分で JavaScript を書く場合は、

http://chaichan.web.infoseek.co.jp/qanda/qa6479.htm?05-12-15-10-...

で公開されている例が参考になると思います。


もし、div の中のテーブルのタグに手を加えられない場合(idを付与できないとか)でも、少し工夫しなければなりませんが、出来ると思います。

要は JavaScript でソートしたいテーブルを特定できれば良いので、手っ取り早いのは使いたいライブラリを決めたら、div の result の中にあるテーブルを検索するようにライブラリをちょっとだけ書き換えてしまえば良いです。

◎質問者からの返答

コメントありがとうございます。

試行錯誤しているのですが、なかなかうまくいきません。

多くのスクリプトがidをキーにして最初にテーブルを読み込んでいるのですが、divの中にあるテーブルをうまく読み込めないような感じです。

document.getElementById('result').getElementByTagName('table')[0]

テーブルを読み込むところをこんな感じにして見るのですがダメです。

もう少し頑張ってみます。


2 ● edvakf
●100ポイント ベストアンサー

直接やる方法はないので、まず配列に格納しないといけません。

<table>
 <tr>
 <td>文字列</td>
 <td>1,000</td>
 <td>1.1</td>
 <td>11%</td>
 </tr>
 以下略

とあるなら、

function makeTableArray(table){
 var array = [];
 var rows= table.getElementsByTagName('tr');
 var len = rows.length;
 for(var i=0;i<len;i++){
 array.push(extractRow(rows[i]))
 }
 return array;
}

tableArray = makeTableArray(document.getElementById('result').getElementByTagName('table')[0])

みたいな感じの処理になり、extractRow の部分は String としてやるなら

var regexp = /<td>.*?</td>/g; // 正規表現はループの前にコンパイルする
function extractRow(row){
 var html = row.innerHTML;
 var columns = html.match(regexp);
 return [
 row.html,
 columns[0],
 columns[1],
 columns[2],
 columns[3]
 ]
}

みたいな感じで、DOM Element としてやるなら、

function extractRow(row){
 var columns = row.getElementsByTagName('td');
 return [
 row,
 columns[0],
 columns[1],
 columns[2],
 columns[3]
 ]
}

みたいな感じになりますね。

ソート部分は適当に検索してください。

String でやる利点は、

var temp = [];
for(var i=0,len=tableArray.length;i<len,i++){
 temp[i]=tableArray[i][0];
}
var table = document.getElementById('result').getElementByTagName('table')[0];
table.innerHTML = '<tr>'+temp.join('</tr>\n<tr>')+'</tr>';

などと簡単に書けることと、DOM をあまり弄らないのでもしかすると後者より高速かもしれません。

DOM Element でやるなら何度も appendChild を繰り返すか、それでは効率が悪いので documentFragment を経由する (それでも appendChild を繰り返すしかない) ことになります。


と、ここまで書いておいて、ググったらこんなのを見つけました。

デモを触ってみましたけど、これで十分な気がします。


ちなみに上に書いたコードは動くかどうか試してません。

◎質問者からの返答

divの中のテーブルが取れない感じです。

document.getElementById('result').getElementByTagName('table')[0]

ここでエラーが出てしまうのですがもう少し頑張ります。


「オブジェクトでサポートされていないプロパティまたはメソッドです」というエラーが出ます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ