- ベストアンサー
WEB上の表でソートするためのJavaScript
- WEB上の表でソートするためのJavaScriptについて知りたいです。
- HTMLのソースではTableを用いた表を作成しており、番号、名前、クラス、クラブの項目をWEB上でソートしたいです。
- ３列でそれぞれソートするのではなく、３つの列を１つの連続した列としてソートしたいです。
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ごめんなさい。#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>
その他の回答 (2)
- think49
- ベストアンサー率59% (285/482)
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>
- yyr446
- ベストアンサー率65% (870/1330)
自作のアドバイスは、他の回答者にまかせるとして、 手っ取り早くライブラリーを利用しては、 「TableKit」 http://millstream.com.au/upload/code/tablekit/index.html
補足
ありがとうございます。ただ、知識不足なので、 丸投げ状態なので、打開案を試みようにも意味もわからず 何一つ実現できない状態です。。 この表を３カラムにする方法すらわからないです。。 すいません。