WEB上の表でソートするためのJavaScript

質問

WEB上の表でソートするためのJavaScript

下記のHTMLのソースではTableを用いた表を作成していますが、
番号、名前、クラス、クラブの項目をWEB上でソートできる
JavaScriptを教えて欲しいのです。

下記ソースの表では、番号順に並べていますが、名前順や、クラス順、
クラブ順に並べ変えたいのです。

ただ、これが表示は１列ではなくの３列に分けて表示したいのです。
３列でそれぞれソートするのではなく、３つの列を１つの連続した列
としてソートしたいのです。

ですから、ソートを実行するためのボタンは、各列には必要なく、左端の列の
各項目をボタンにできればと思っています。

どうぞよろしくお願い致します。

<table border="3">
<TR>
<TD>
<TABLE border="1" >
<TR>
<Th>番号</Th><Th>名前</Th><Th>クラス</Th><Th>クラブ</Th>
</TR>
<TR>
<TD>1</TD><TD>ヤマダ</TD><TD>A</TD><TD>水泳</TD>
</TR>
<TR>
<TD>2</TD><TD>タナカ</TD><TD>C</TD><TD>野球</TD>
</TR>
<TR>
<TD>3</TD><TD>サトウ</TD><TD>E</TD><TD>水泳</TD>
</TR>
<TR>
<TD>4</TD><TD>スズキ</TD><TD>D</TD><TD>茶道</TD>
</TR>
</TABLE>
</TD>

<TD>
<TABLE border="1" >
<TR>
<Th>番号</Th><Th>名前</Th><Th>クラス</Th><Th>クラブ</Th>
</TR>
<TR>
<TD>5</TD><TD>ワタナベ</TD><TD>B</TD><TD>バレー</TD>
</TR>
<TR>
<TD>6</TD><TD>イトウ</TD><TD>C</TD><TD>水泳</TD>
</TR>
<TR>
<TD>7</TD><TD>キムラ</TD><TD>A</TD><TD>柔道</TD>
</TR>
<TR>
<TD>8</TD><TD>イシダ</TD><TD>B</TD><TD>卓球</TD>
</TR>
</TABLE>
</TD>

<TD>
<TABLE border="1" >
<TR>
<Th>番号</Th><Th>名前</Th><Th>クラス</Th><Th>クラブ</Th>
</TR>
<TR>
<TD>9</TD><TD>ワダ</TD><TD>C</TD><TD>卓球</TD>
</TR>
<TR>
<TD>10</TD><TD>タダ</TD><TD>D</TD><TD>柔道</TD>
</TR>
<TR>
<TD>11</TD><TD>ミキ</TD><TD>E</TD><TD>野球</TD>
</TR>
<TR>
<TD>12</TD><TD>ハナダ</TD><TD>A</TD><TD>水泳</TD>
</TR>
</TABLE>
</TD>
</TR>
</table>

回答No.3

think49 · ベストアンサー

ごめんなさい。#2 の書き方は出来ませんでした。
tbody は複数個置けますが、thead, tfoot は一つしか置けません。

11.2.1 TABLE要素 - HTML 4.01 (ja)
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/tables.html#h-11.2.1
4.9 Tabular data — HTML5 (including next generation additions still in development) - HTML5
http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-table-element

打開案としては、以下のように。

1. 1つのtable要素を作り、tr要素を float で流し込んで3カラムに
2. ソート実行前にth要素を持つtr要素を removeChild()
3. ソート実行
4. 2. で削除したノードを挿入する

<table>
　<thead>
　　<tr><th>番号</th><th>名前</th><th>クラス</th><th>クラブ</th></tr>
　</thead>
　<tbody>
　　<tr><td>1</td><td>ヤマダ</td><td>a</td><td>水泳</td></tr>
　　<tr><td>2</td><td>タナカ</td><td>c</td><td>野球</td></tr>
　　<tr><td>3</td><td>サトウ</td><td>e</td><td>水泳</td></tr>
　　<tr><td>4</td><td>スズキ</td><td>d</td><td>茶道</td></tr>
　　<tr><th>番号</th><th>名前</th><th>クラス</th><th>クラブ</th></tr>
　　<tr><td>5</td><td>ワタナベ</td><td>b</td><td>バレー</td></tr>
　　<tr><td>6</td><td>イトウ</td><td>c</td><td>水泳</td></tr>
　　<tr><td>7</td><td>キムラ</td><td>a</td><td>柔道</td></tr>
　　<tr><td>8</td><td>イシダ</td><td>b</td><td>卓球</td></tr>
　　<tr><th>番号</th><th>名前</th><th>クラス</th><th>クラブ</th></tr>
　　<tr><td>9</td><td>ワダ</td><td>c</td><td>卓球</td></tr>
　　<tr><td>10</td><td>タダ</td><td>d</td><td>柔道</td></tr>
　　<tr><td>11</td><td>ミキ</td><td>e</td><td>野球</td></tr>
　　<tr><td>12</td><td>ハナダ</td><td>a</td><td>水泳</td></tr>
　</tbody>
</table>

補足

ありがとうございます。ただ、知識不足なので、
丸投げ状態なので、打開案を試みようにも意味もわからず
何一つ実現できない状態です。。

この表を３カラムにする方法すらわからないです。。
すいません。

回答No.2

think49

table要素の子に thead, tbody をぞれぞれ3つ用意してみてはどうでしょう？
table要素が一つになりますし、float: left; thead, tbody を流し込めば期待通りのデザインを実現できると思います。

(※以下、全角空白は半角空白に置換してください)

<table>
　<thead>
　　<tr><th>番号</th><th>名前</th><th>クラス</th><th>クラブ</th></tr>
　</thead>
　<tbody>
　　<tr><td>1</td><td>ヤマダ</td><td>a</td><td>水泳</td></tr>
　　<tr><td>2</td><td>タナカ</td><td>c</td><td>野球</td></tr>
　　<tr><td>3</td><td>サトウ</td><td>e</td><td>水泳</td></tr>
　　<tr><td>4</td><td>スズキ</td><td>d</td><td>茶道</td></tr>
　</tbody>
　<thead>
　　<tr><th>番号</th><th>名前</th><th>クラス</th><th>クラブ</th></tr>
　</thead>
　<tbody>
　　<tr><td>5</td><td>ワタナベ</td><td>b</td><td>バレー</td></tr>
　　<tr><td>6</td><td>イトウ</td><td>c</td><td>水泳</td></tr>
　　<tr><td>7</td><td>キムラ</td><td>a</td><td>柔道</td></tr>
　　<tr><td>8</td><td>イシダ</td><td>b</td><td>卓球</td></tr>
　</tbody>
　<thead>
　　<tr><th>番号</th><th>名前</th><th>クラス</th><th>クラブ</th></tr>
　</thead>
　<tbody>
　　<tr><td>9</td><td>ワダ</td><td>c</td><td>卓球</td></tr>
　　<tr><td>10</td><td>タダ</td><td>d</td><td>柔道</td></tr>
　　<tr><td>11</td><td>ミキ</td><td>e</td><td>野球</td></tr>
　　<tr><td>12</td><td>ハナダ</td><td>a</td><td>水泳</td></tr>
　</tbody>
</table>

回答No.1

yyr446

自作のアドバイスは、他の回答者にまかせるとして、

手っ取り早くライブラリーを利用しては、
「TableKit」

http://millstream.com.au/upload/code/tablekit/index.html