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


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

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

回答の条件
  • 1人5回まで
  • 登録:2009/02/16 19:06:12
  • 終了:2009/02/17 10:04:34

ベストアンサー

id:edvakf No.2

edvakf回答回数27ベストアンサー獲得回数122009/02/17 01:55:47

ポイント100pt

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

<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 を繰り返すしかない) ことになります。


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

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


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

id:southgate_01

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

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

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


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

2009/02/17 09:16:28

その他の回答(1件)

id:tsukasa57 No.1

tsukasa57回答回数110ベストアンサー獲得回数202009/02/16 22:30:52

ポイント80pt

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

もし 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:southgate_01

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

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

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

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

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

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

2009/02/17 09:10:45
id:edvakf No.2

edvakf回答回数27ベストアンサー獲得回数122009/02/17 01:55:47ここでベストアンサー

ポイント100pt

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

<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 を繰り返すしかない) ことになります。


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

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


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

id:southgate_01

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

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

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


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

2009/02/17 09:16:28
  • id:tsukasa57
    「<div id='result'></div>の中に読み込んだテーブル」はどのような形式でしょう?どんな列がありますか?テーブルの例と何を基準にしてソートするか(例えば数字とか文字列のABC順とか)を示して頂ければ解答できるかもしれません。
  • id:southgate_01
    southgate_01 2009/02/16 21:41:19
    並べ替えたいのは数字(金額,小数点,パーセント)です。
    文字列もあるのですが、数字が並べ替えられればこちらは重視しません。

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

    このような感じで1列目に文字列が来てそれ以降に数字の列が続きます。
    列数は決まっていて(5~10列)動的に増えることはありません。

    何かアドバイスをいただけると助かります
  • id:edvakf
    document.getElementById('result').getElementByTagName('table')[0]

    ではなく

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

    でした。すみません。
  • id:southgate_01
    southgate_01 2009/02/17 10:03:59
    こちらこそコピペしか出来ずにすいません。
    おかげさまでやりたいことがバッチリ出来ました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません